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>