vue-seamless-scroll 组件用法-区域内容滚动效果

1.滚动效果

2.代码

<div class="page-container" style="">
      <vue-seamless-scroll :data="listData" :class-option="defaultOption">
        <ul class="ul-scoll">
          <li v-for="(item, index) in listData" :key="index">
            <span class="title">{{ item.title }}：</span
            ><span class="date">{{ item.time }}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
</div>
<script>
// 引入vue-seamless-scroll组件
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
   name: 'Demo',
   components:{
     vueSeamlessScroll
   }
   data(){
      return {
        defaultOption: {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 0, // 开始无缝滚动的数据量 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)
        },
        listData: [],
      }
   },
   mounted(){
     for (let i = 0; i < 3; i++) {
       let j = {
        title: "无缝滚动序号index：" + i,
        time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm'),
       };
       this.listData.push(j);
     }
     const len = this.listData.length;
     // 这里的目的是为了判断数组的长度是否超出了容器高度，如果超出了则进行无缝滚动，反之就不滚动。
     this.defaultOption.limitMoveNum = (len) * 40 > 200 ? len: len+1;
     console.log(this.defaultOption.limitMoveNum,len,'::>>>>>0000')
   },
   methods:{}
}
</script>
<style lang="less">

.page-container {

width: 400px;

height: 200px;

overflow: hidden;

border: 1px solid #283dff;

.ul-scoll {

li {

height: 40px;

line-height: 40px;

background: rgba(198, 142, 226, 0.4);

}

</style>

3.使用方法

使用npm安装：
   npm install vue-seamless-scroll --save
使用yarn安装：
   yarn add vue-seamless-scroll

使用：
注册组件：
   //全局注册 main.js文件
   import vueSeamlessScroll from 'vue-seamless-scroll';
   vue.use(vueSeamlessScroll);
   <script>
   //单个文件局部注册
   　　import vueSeamlessScroll from 'vue-seamless-scroll'
   　　export default {
     　　components:{
      　　 vueSeamlessScroll
     　　},
        data(){
           return{
             listData: [
               {"title": "无缝滚动了","time": new Date()},
               {"title": "无缝滚动了","time": new Date()}
             ],
             classOption: {},
           }
        },
        methods:{
          
        }
   　　}
   </script>
   <template>
      <vue-seamless-scroll :data="listData" class="wrap" :class-option="classOption">
        <ul class="item">
          <li v-for="(item, index) in listData" :key="index">
             <span class="item.title">{{item.title}}</span>
             <span class="item.time">{{item.time}}</span>
          </li> 
        </ul>
      </vue-seamless-scroll>
   </template>
   <style lang="less" scoped>
     .wrap{
       height: 270px;
       width: 400px;
       margin: 0 auto;
       overflow: hidden;
       li{
         list-style: none;
         padding:0;
         margin: 0;
         height: 40px;
         line-height: 40px;
         font-size: 16px;
         display: flex;
         justify-content: space-between;
       }
     }
   </style>

4.组件配置

listData数据： 无缝滚动list数据。
组件内部只关注listdata数组的length。

classOption:{
  step: 1,// 数值越大滚动速度越快，step值不建议太小，不然会有卡顿效果
  limitMoveNum:5,//开启无缝滚动的数据量
  hoverStop: true, //是否启用鼠标hover控制
  direction: 1, //方向 0往下  1往上  2向左  3向右
  openTouch: true, // 移动端开启touch滑动
  singleHeight: 0, //单步运动停止的高度（默认值0是无缝不停止的滚动），direction为0/1生效
  singleWidth: 0,//单步运动停止的宽度， direction为2/3生效
  waitTime: 1000, //单步停止等待时间
  switchOffset: 30, //左右切换按钮距离左右边界的边距px
  autoPlay: true, // 需要实现手动切换左右滚动的时候，必须设置autoPlay: false
}

回调事件：
  @ScrollEnd="handleScrollEnd"
  methods:{
    handleScrollEnd(){
      console.log()
    }
  }

注意点：
1.最外层容器需要手动设置 width, height, overflow:hidden;
2.左右的无缝滚动需要给主内容区域（即默认slot插槽提供）设定合适的css width 属性，也可设置display:flex等
3.step值不建议太小，不然会出现卡顿效果
4.需要实现手动切换左右滚动的时候，必须设置 autoPlay: false.


复杂结构数组属性更新问题：
  vue-seamless-scroll组件中的list数据length无变化，仅仅是属性变更，手动调用组件内部的 reset方法即可。
  eg: this.$refs.seamlessScroll.reset();