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的時候才觸發滾動