vue 实现上下左右滑动(滚动)

在线文档

https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 

使用vue-seamless-scroll组件

1.安装
npm install vue-seamless-scroll --save
  2.导入
import vueSeamlessScroll from 'vue-seamless-scroll'

3.使用组件

            <vueSeamlessScroll :data="noticeList" class="seamless-warp"  :class-option="optionCustomer">
                <ul class="item">
                    <li v-for="item in noticeList">
                      <router-link :to="'/page/notice/details/'+item.id">
                        <span style=" font-size:16px;margin:5px 0" v-text="item.name"></span>
                      </router-link>
                    </li>
                </ul>
            </vueSeamlessScroll>
4.设置样式
.seamless-warp {
  line-height:30px;
  height: 60px;
  overflow: hidden;
}

  

5.可通过一些属性设置滚动速度,滚动方向,开始滚动的条数,每次滚动的条数
      optionCustomer: {
        step: 1,
        limitMoveNum: 3,
        openTouch: false,
        waitTime: 50,
        direction: 1,//方向 0 往下 1 往上 2向左 3向右
        singleWidth: 30
      },

  注:我最开始使用的时候就是 没有设置参数,而我的数据又比较少,就没有滚动效果,因为limitMoveNum 的默认条数是5,也就是当数组长度大于等于5的时候才触发滚动

上一篇:Vue实现上下左右无缝滚动,鼠标移入并暂停


下一篇:vue-seamless-scroll 好用的无缝滚动插件