需求:超过4条数据就开始无限循环滚动

在线文档:https://chenxuan1993.gitee.io

使用vue-seamless-scroll组件步骤:

一:安装

npm install vue-seamless-scroll --save

二:在用到的页面引入和注册组件

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "test-abnormal-dynamics",
  components:{vueSeamlessScroll},
 }
</script>  

三:使用组件

<vueSeamlessScroll :data="noticeList" class="seamless-warp"  :class-option="optionCustomer">
    <ul class="item">
        <li v-for="item in noticeList">
           这里写自己要渲染的内容及样式
        </li>
    </ul>
</vueSeamlessScroll>

四:属性设置,滚动速度，滚动方向，开始滚动的条数，每次滚动的条数

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "test-abnormal-dynamics",
  components:{vueSeamlessScroll},
  data() {
    return {
      optionCustomer: {
        step: 1,
        limitMoveNum: 5,//限制开始滚动的条数
        openTouch: false,
        waitTime: 50,
        direction: 1, //方向 0 往下 1 往上 2向左 3向右
        singleWidth: 30,
      },
    };
   },
 }
 <script> 

注：我最开始使用的时候就是 没有设置参数，而我的数据又比较少，就没有滚动效果，因为limitMoveNum 的默认条数是5，也就是当数组长度大于等于5的时候才触发滚动~
注:我做的是向上滚动,左右滚动的话看文档需要给一个初始的width宽度,具体看文档实现哦,小可爱们~~

五:设置样式

.seamless-warp {
  line-height:30px;
  height: 60px;
  overflow: hidden;
  //根据自己需要的高度来调整
}

标签：vue,滚动,鼠标,vueSeamlessScroll,seamless,条数,Vue,上下左右,scroll
来源： https://blog.csdn.net/hong521520/article/details/120268457