vue中使用无缝滚动插件vue-seamless-scroll

1、npm 安装

npm install vue-seamless-scroll --save 

2、引入插件
在项目main.js中引入与使用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3、html代码

<vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
      <ul class="item">
        	<li v-for="(item,id) in newsList" v-text="item.title" :key="id"></li>
      </ul>
</vue-seamless-scroll>

4、data中存数据

export default {
  data() {
    return {
      newsList: [
        {
          title: "单步运动停止的高度"
        },
        {
          title: "单步运动停止的高度单步运动停止的高度"
        }
      ]
    };
  },

5、JS代码 （创建计算属性钩子函数）

computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 2
        // 以下是自选属性
        // step: 0.2, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        // hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 0, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  }

6、css样式代码

<style lang="scss" scoped>
.seamless-warp2 {
    overflow: hidden;
    height: 45px;
    width: 380px;
    ul.item {
      width: 280px;
      li {
        float: left;
        margin-right: 10px;
      }
    }
  }
</style>

6、效果图