如图中的数据实现无缝滚动效果,发现vue的vue-seamless-scroll组件超好用对于数据滚动。

首先,

npm install vue-seamless-scroll --save

其次,引入组件

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

然后,在标签中使用

<vue-seamless-scroll :data="listData.station" class="seamless-warp" :class-option="classOption">
        <ul>
          <li v-for="(item,index) in listData.station" :key="index">
            <span class="left-border">{{index+1}}</span>
            <span class="income-title">{{item.station_name}}</span>
          </li>
        </ul>
</vue-seamless-scroll>

css:

.seamless-warp {
      width: 100%;
      height: 80%;
      overflow: hidden;
    }

js配置:

computed:{
    classOption(){
      return {
        step:0.5,//数值越大速度滚动越快,更多参数参考官网参数配置
        // limitMoveNum: 2,// 开始无缝滚动的数据量
      }
    }
  },

 

Logo

前往低代码交流专区

更多推荐