vue实现数据无缝滚动组件vue-seamless-scroll
如图中的数据实现无缝滚动效果,发现vue的vue-seamless-scroll组件超好用对于数据滚动。首先,npm install vue-seamless-scroll --save其次,引入组件import vueSeamlessScroll from 'vue-seamless-scroll'components: { vueSeamlessScroll...
·
如图中的数据实现无缝滚动效果,发现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,// 开始无缝滚动的数据量
}
}
},
更多推荐
已为社区贡献20条内容
所有评论(0)