VUE vue-seamless-scroll 无缝滚动

官网:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

下载:

链接：https://pan.baidu.com/s/1VjcwhVpUFAlHFQfFgr-iWg
提取码：hl2y

 1 <template>
 2     <vue-seamless-scroll :data="listData" :class-option="optionSingleHeightTime" class="seamless-warp">
 3         <ul class="item">
 4             <li v-for="item in listData">
 5                 <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
 6             </li>
 7         </ul>
 8     </vue-seamless-scroll>
 9 </template>
10 <style lang="scss" scoped>
11     .seamless-warp {
12         height: 229px;
13         overflow: hidden;
14     }
15 </style>
16 <script>
17     export default {
18         data () {
19             return {
20                 listData: [{
21                    'title': '无缝滚动第一行无缝滚动第一行',
22                    'date': '2017-12-16'
23                  }, {
24                     'title': '无缝滚动第二行无缝滚动第二行',
25                     'date': '2017-12-16'
26                  }, {
27                      'title': '无缝滚动第三行无缝滚动第三行',
28                      'date': '2017-12-16'
29                  }, {
30                      'title': '无缝滚动第四行无缝滚动第四行',
31                      'date': '2017-12-16'
32                  }, {
33                      'title': '无缝滚动第五行无缝滚动第五行',
34                      'date': '2017-12-16'
35                  }, {
36                      'title': '无缝滚动第六行无缝滚动第六行',
37                      'date': '2017-12-16'
38                  }, {
39                      'title': '无缝滚动第七行无缝滚动第七行',
40                      'date': '2017-12-16'
41                  }, {
42                      'title': '无缝滚动第八行无缝滚动第八行',
43                      'date': '2017-12-16'
44                  }, {
45                      'title': '无缝滚动第九行无缝滚动第九行',
46                      'date': '2017-12-16'
47                  }]
48                 }
49             },
50             computed: {
51                 optionSingleHeightTime () {
52                     return {
53                             singleHeight: 26,
54                             waitTime: 2500
55                         }
56                 }
57              }
58        }
59 </script>

optionSingleHeightTime常用参数:

 step: 1, // 数值越大速度滚动越快
    hoverStop: true, // 是否开启鼠标悬停stop
    openWatch: true, // 开启数据实时监控刷新dom
    limitMoveNum: 30,
   /* step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: this.toldist.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)*/

动态生成的数据需要做一下数据拷贝:
在mounted中将动态的数据拷贝给 dataList
例:
mounted:function(){
　　this.dataList=this.data
}

<vue-seamless-scroll v-if="dataList.length>0" :data="data" :class-option="optionHover" class="jj-seamless-warp">