vue插件 vue-seamless-scroll 無縫滾動插件ES6使用總結

 最近因為需求需要寫一個項目信息無縫向上滾動組件，在網上搜了一下，看到大家的一致好評就果斷的使用了vue-seamless-scroll組件。下面就簡單的介紹它的使用，具體詳細的使用推薦大家去看下開發者文檔。

步驟如下：

1.  安裝：npm install vue-seamless-scroll –save

2.  global install 全局掛載

// **main.js**

import Vue from 'vue'

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

//or you can set componentName default componentName is vue-seamless-scroll

Vue.use(scroll,{componentName: 'scroll-seamless'})

 3.  單文件 .vue import使用

ＨＴＭＬ模板信息： <vue-seamless-scroll
     :data="projectDesList"
     :class-option="optionSetting" //參數配置，計算屬性
     class="seamless-warp"
>
   <ul class="item">
      <li v-for="(item,key) in projectDesList" :key>
         <span class="title" v-text="item.title"></span>
      </li>
   </ul>
</vue-seamless-scroll>
 腳本信息配置： <script>

  import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
      data() {
        return { 
          projectDesList: []// 滾動項目信息為數組
        }
      }
   }
備注：若滾動信息為API后台請求數據，需要在vue 生命周期create 以及mounted中同時通過this.$nextTick請求，目的是保證在dom加載前獲取數據再渲染。

例如 created() { this.$nextTick(() => { this.getProjectIntr() }) }, mounted() { this.$nextTick(() => { setTimeout(() => { this.getProjectIntr()//獲取數據接口方法 }, 500) }) }
 
通過vue計算屬性配置滾動信息自定義參數

computed: {

   optionSetting () {

      return {

        step: 0.2, // 數值越大速度滾動越快

        limitMoveNum: 2, // 開始無縫滾動的數據量 this.dataList.length

        hoverStop: true, // 是否開啟鼠標懸停stop

        direction: 0, // 0向下 1向上 2向左 3向右

        openWatch: true, // 開啟數據實時監控刷新dom

        singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1

        singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3

        waitTime: 1000 // 單步運動停止的時間(默認值1000ms)

      }

    }

  }
   }
</script>
 滾動信息的容器樣式高度和overflow 屬性為必選項，樣式配置信息如下： <style rel="stylesheet/scss" lang="scss" scoped>

.seamless-warp {

    height: 188px;

    overflow: hidden;

     ul {

    list-style: none;

    padding: 0;

    margin: 0 auto;

      li {

      height: 30px;

      line-height: 30px;

      display: flex;

      justify-content: space-between;

      font-size: 15px;
        }
      }
  }

</style>