欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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属性,否则页面排版会有问题

Vue列表跑马灯循环,类似中奖名单上下无缝滚动
Vue列表跑马灯循环,类似中奖名单上下无缝滚动
Vue列表跑马灯循环,类似中奖名单上下无缝滚动