移动端使用better-scroll插件水平滑动

移动端项目开发中，处理滚动列表是再常见不过的需求。

1、better-scroll 常见的 html 结构：

2、安装better-scroll插件 npm i better-scroll -D
页面引入import BScroll from “better-scroll”;
2、初始化better-scroll
better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构变化的时候并没有重新计算 better-scroll。
Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了this.$refs.swiper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，swiper的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。
better-scroll的参数配置参考：https://blog.csdn.net/qq_23159841/article/details/107932335