目前看到有用的插件就会保留，不为别的，就是想以后遇到同样的问题能及时高效的解决，前两天分享了app项目中的文字轮播。今天搞下vue中的吧，以便后用。

1、安装这个插件

npm i vue-seamless-scroll --save

 

2、在需要文字轮播的页面中引入

 

import vueSeamless from 'vue-seamless-scroll'

export default {

name: 'HelloWorld',

data () {

      return {

         list:['aaaaa','bbbbbb','ccccc','ddddd','eeeee','ffffff']

            }

   },

components: {

          vueSeamless

},

computed: {

         defaultOption () {

               return {

                        singleHeight:35,

                        waitTime: 2500

                   }

                }

             },

      }

<vue-seamless :data="list" class="seamless-warp" :class-option="defaultOption">

<ul>

<li v-for="(item,index) in list" :key="index">{{item}}</li>

</ul>

</vue-seamless>

defaultOption () {    return {     step: 1, //步长 越大滚动速度越快     limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length     hoverStop: true, //是否启用鼠标hover控制     direction: 1, //1 往上 0 往下     openWatch: true, //开启data实时监听     singleHeight: 0, //单条数据高度有值hoverStop关闭     waitTime: 1000 //单步停止等待时间    }   }