使用 vue + better-scroll實現橫向滾動效果

 

1、安裝better-scroll插件：npm install better-scroll --save

2、在項目中引用better-scroll對象：import BScroll from 'better-scroll'

3、例如，看一段代碼：

 

<div class="person-wrap" ref="personWrap">
  <ul class="person-list" ref="personTab">
    <li class="person-item">1</li>
    <li class="person-item">2</li>
    <li class="person-item">3</li>
    <li class="person-item">4</li>
    <li class="person-item">5</li>
  </ul>
</div>

 

 

 

　　

　　以上有三個點需要注意，第一個點是外部div是滾動的整個區域，需要通過ref獲取dom；
　　第二點是ul元素包裹子元素li的父元素，它的寬度是動態的，根據N個子元素的寬度計算得來，因此也需要通過ref獲取dom；
　　第三點是li元素在實際開發中是不確定的，它的個數以及寬度時刻影響着父元素的寬度。

4、最后，看一段核心代碼：

import BScroll from "better-scroll";
export default {
  name: "ReserveInfo",
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.personScroll();
    });
  },
  methods: {
    personScroll() {
      // 默認有六個li子元素，每個子元素的寬度為120px
      let width = 6 * 120;
      this.$refs.personTab.style.width = width + "px";
      // this.$nextTick 是一個異步函數，為了確保 DOM 已經渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.personWrap, {
            startX: 0,
            click: true,
            scrollX: true,
            // 忽略豎直方向的滾動
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    }
  }
}

 

在html中dom全部渲染完畢后，調用this.personScroll()方法，該方法首先為ul父元素的寬度動態賦值；
接着定義滾動區域對象，設置相關的屬性即可。

尾聲

通過better-scroll我們能輕松的實現橫向滾動或者縱向滾動，然而知道怎么用其實並沒有什么亂用，

我們需要明白的是其原理，最后的最后請各位看官移步到better-scroll庫設計者有話說，進一步探索better-scroll的奧妙所在。

[links]：https://www.imooc.com/article/272021