VUE中使用滚动组件-vueSeamlessScroll

npm install --save vue-seamless-scroll

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
  vueSeamlessScroll
}

<div class="content">
  <vue-seamless-scroll
    // 方法一：data数据传递；或者使用方法二：computed数据传递
    :class-option="classOption"
    :data="info"
  >
    <!--包ul和li-->
  </vue-seamless-scroll>
</div>

// classOption配置动态传递给class-option
classOption: {
  // 滚动速度
  step: 0.4,
  // 鼠标悬停停止滚动
  hoverStop: true,
  // 滚动组数
  limitMoveNum: 2,
  // 监听刷新
  openWatch: true
},
// 网络请求过来的数据动态传递给data
info: []

computed: {
  classOption () {
    return {
       // 滚动速度
       step: 0.4,
       // 鼠标悬停停止滚动
       hoverStop: true,
       // 滚动组数
       limitMoveNum: 2,
       // 监听刷新
       openWatch: true
    }
  }
}

<ul class="item-box">
  <li
    class="item"
    v-for="item in info"
    :key="item.time"
  >
    相关内容
  </li>
</ul>

<!-- 内容开始 -->
<div class="content">
  <vue-seamless-scroll
    :class-option="classOption"
    :data="info"
  >
    <ul class="item-box">
      <li
        class="item"
        v-for="item in info"
        :key="item.time"
      >
        相关内容
      </li>
    </ul>
  </vue-seamless-scroll>
</div>
<!-- 内容结束 -->