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,滚动,seamless,height,条数,滑动,上下左右,scroll
来源： https://www.cnblogs.com/liuna369-4369/p/14714812.html