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>