Vue列表跑马灯循环,类似中奖名单上下无缝滚动
程序员文章站
2022-06-09 23:27:08
...
主要就是通过一个插件
sudo cnpm i vue-seamless-scroll --save
然后在页面
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
使用方法也很简单
<vue-seamless-scroll :data="agreeperson" :class-option="optionHover" >
<ul v-for="(item,index) in agreeperson " :key="index">
<li>{{item}}</li>
</ul>
记住:data中的数组跟循环的数组一致
这个需要在computed里面写方法
computed: {
optionHover () {
return {
hoverStop: true, //是否悬停
singleHeight:0, // 单行停顿
}
}
},
下面是这个插件的一些参数
如果使用autoplay属性,必须要在v-for的标签上加width属性,否则页面排版会有问题
上一篇: Highcharts项目实战
下一篇: Highcharts 图上文字重影问题