使用vue+better-scroll实现横向滚动效果

第一步:安装better-scroll：npm install better-scroll --save-dev
第二步:在项目中引入better-scroll对象import Bscroll from 'better-scroll'
        代码结构如下：
  

  

    
1
    
2
    
3
    
4
    
5
  

以上有三个点需要注意，第一个点是外部div是滚动的整个区域，需要通过ref获取dom；
第二点是ul元素包裹子元素li的父元素，它的宽度是动态的，根据N个子元素的宽度计算得来，
因此也需要通过ref获取dom；第三点是li元素在实际开发中是不确定的，它的个数以及宽度
时刻影响着父元素的宽度。

最后，我们再来看看核心代码

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父元素的宽
度动态赋值；接着定义滚动区域对象，设置相关的属性即可。