目前看到有用的插件就会保留,不为别的,就是想以后遇到同样的问题能及时高效的解决,前两天分享了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 //单步停止等待时间

   }

  }

Logo

前往低代码交流专区

更多推荐