一、安装

npm install vue-seamless-scroll --save
//或者
yarn add vue-seamless-scroll

二、注册

// 全局注册 main.js中
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
 
 
// 局部使用 在需要用到的组件中
import vueSeamless from 'vue-seamless-scroll'
 
export default {
    
    
  components: {
    
    
    vueSeamless
   }
}

三、使用

<vue-seamless-scroll ref="vueSeamlessRef" :data="listData" class="warp" :class-option="vueSeamlessOptions">
  <ul class="item">
    <li v-for="(item, index) in listData" :key="index">
      <span class="title" v-text="item.title"></span>
      <span class="date" v-text="item.date"></span>
    </li>
  </ul>
</vue-seamless-scroll>
 
<style lang="scss" scoped>
  .warp {
    
    
    height: 270px; // 必须否则滚动可视区会撑开！！！！！！！！！
    width: 360px;
    margin: 0 auto;
    overflow: hidden; // 必须否则滚动可视区会撑开！！！！！！！！！！
    ul {
    
    
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
    
    
        display: block;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
</style>

四、配置项

	描述	默认值default	类型type
step	数值越大速度滚动越快（step 值不建议太小,不然会有卡顿效果。如果设置了单步滚动,step 需是单步大小的约数）	1	Number
limitMoveNum	开启无缝滚动的数据量	1	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction 为 0/1 时生效。	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction 为 2/3 时生效。	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	需要实现手动切换左右滚动的时候,必须设置autoPlay:false（1.1.17 版本开始，只需要设置navigation:false）,目前不支持环路	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String

五、回调事件

<vue-seamless-scroll :data="listData" @ScrollEnd="ScrollEnd" class="warp">
 
 
 ScrollEnd: function(){
    
    
   console.log("ScrollEnd")
 }

四、注意事项

• :data=“listData” 无缝滚动 list 数据，必须要有。
• vueSeamlessOptions最好放在计算属性中
• vue-seamless-scroll需要手动设置width、height、overflow:hidden
• 左右的无缝滚动需要给主内容区域（即默认slot插槽提供）设定合适的css width属性(否则无法正确计算实际宽度)。 也可以通过给他设置为display:flex;无需设置css width属性
• step值不建议太小,不然会有卡顿效果(如果设置了单步滚动,step需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。~~~~~,比如单步设置的30,step不能为4)
• 需要实现手动切换左右滚动的时候,必须设置autoPlay:false（1.1.17版本开始，只需要设置navigation:false）,目前不支持环路
• 提供了slot left-switch || right-switch可以自由定义需要的按钮样式 外层有div已经定位了位置居中,距离两边侧的距离可以通过switchOffset参数调整
• 当按钮到达边界位置,会自动为无法点击状态按钮加上定义的switchDisabledClass: ‘disabled’,可以按需配置实践中的一些问题点