VUE中使用滚动组件-vueSeamlessScroll

滚动实例

1.安装

npm install --save vue-seamless-scroll

2.引入组件vueSeamlessScroll

import vueSeamlessScroll from 'vue-seamless-scroll'

3.注册组件

components: {
  vueSeamlessScroll
}

4.使用组件，外层需要包一个盒子content，content样式设置(overflow: hidden; max-height: 具体数值)

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

5.数据配置

5.1data中配置

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

5.2computed中配置

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

6.必须使用ul和li标签

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

7.整体实例框架

<!-- 内容开始 -->
<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>
<!-- 内容结束 -->