1. 程式人生 > >vue文字輪播外掛

vue文字輪播外掛

目前看到有用的外掛就會保留,不為別的,就是想以後遇到同樣的問題能及時高效的解決,前兩天分享了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 //單步停止等待時間

   }

  }