Vue实现无缝滚动（vue-seamless-scroll插件）

文章目录

                npm安装

                项目引用

                使用插件

                注意问题

---

npm安装

1.vue2

  npm install vue-seamless-scroll --save 

2.vue3

npm install vue3-seamless-scroll --save

项目引用

  在main.js中引入 作为全局
  import seamlessScroll from 'vue-seamless-scroll'
  Vue.use(seamlessScroll )

使用

<template>
  <vue-seamless-scroll :data="listData" class="seamless">
    <ul class="item">
      <li v-for="(item,index) in listData" :key="index">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
export default {
  data () {
    return {
      listData: [
        {
          title: '无缝滚动第一行无缝滚动第一行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第二行无缝滚动第二行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第三行无缝滚动第三行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第四行无缝滚动第四行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第五行无缝滚动第五行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第六行无缝滚动第六行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第七行无缝滚动第七行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第八行无缝滚动第八行',
          date: '2017-12-16'
        },
        {
          title: '无缝滚动第九行无缝滚动第九行',
          date: '2017-12-16'
        }
      ]
    }
  }，
 // 监听属性 类似于data概念
  computed: {
    defaultOption () {
      // IE浏览器会卡顿
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        delay: 0
      }
    }
  },
}

</script>
<style lang="scss" scoped>
.seamless {
  height: 229px;
  overflow: hidden;
}
</style>

注意问题

IE浏览器与其他浏览器滚动速度有差异 所以要单独处理

可以在项目上判断浏览器的内核是否为iE，处理滚动速度