Vue实现横向无缝滚动

最新推荐文章于 2024-06-29 15:18:41 发布

凌云的视界

最新推荐文章于 2024-06-29 15:18:41 发布

阅读量6.3k

点赞数 2

分类专栏：工作笔记封装组件文章标签： vue

本文链接：https://blog.csdn.net/weixin_38680881/article/details/118183751

版权

工作笔记同时被 2 个专栏收录

25 篇文章 3 订阅

订阅专栏

封装组件

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用vue-seamless-scroll库创建一个横向滚动的资讯展示组件。当鼠标悬停时，滚动会暂停，鼠标离开后继续滚动。在组件中，作者通过设置配置参数实现了定制化的滚动效果，并提供了安装、引入和配置步骤。

摘要由CSDN通过智能技术生成

需求描述

需要实现一个信息条横向无缝滚动，鼠标移上停止滚动移开继续滚动的效果如下图，

在这里插入图片描述

技术实现

本着高效开发的目的，第一步自然是去找有没有合适现成的轮子就直接用了。果然vue-seamless-scroll就能完美实现以上要求。于是封装了一个基于vue-seamless-scroll的信息横向无缝滚动组件

安装vue-seamless-scroll

npm install vue-seamless-scroll -S

新建marqueex.vue 组件并引入vue-seamless-scroll

html部分

  <div class="main">
  <div class="left">
    <img src="@/assets/imgs/alarm.png" alt="" />
    <span> 最新资讯： </span>
  </div>
  <div class="right">
    <vue-seamless-scroll
      :data="dataList"
      :class-option="optionLeft"
      class="seamless-warp2"
    >
      <ul class="item">
        <li v-for="(item, index) in dataList" :key="index"  :data-index="index">
          {{
            item
          }}
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</div>

引入部分

<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'   
components: {
        vueSeamlessScroll
},

配置参数部分

 computed: {
    optionLeft() {
    return {
        step:0.8,
        direction: 2,// 0向下 1向上 2向左 3向右
        // limitMoveNum: this.dataList.length,// 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true,
        openTouch: false,
    };
    },
},