vue中使用better-scroll实现滑动效果

经过一段时间的比较，个人觉得 better-scroll 是移动端最好用的滚动插件，但是在使用过程中发现，目前很多文章关于这个组件的使用写的过简单及阅读性不是很强，我结合了许多文章，最终才完成。所以趁此机会准备整理出来。（注：此篇文章只是简单的使用滚动，关于其组件复杂功能日后更新…）

引入组件

1. 使用cdn

<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

// minify
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

2. 使用npm包

npm install better-scroll -S  # 安装带有所有插件的 BetterScroll

npm install @better-scroll/core # 核心滚动，如果仅为了滚动效果，只需要引入它即可

Html结构

<div class='wrapper'>
	<div class='content'></div>
</div>

Css结构

.wrapper {
  height:500px
  overflow: hidden;
}

使用条件：
必须包含两个大的div，外层和内层div
外层div设置可视的大小(宽或者高)
内层div，包裹整个可以滚动的部分
内层div高度一定大于外层div的宽或高，才能滚动‘
外层div overflow属性不可缺少

Javascript 结构

<script>
import BScroll from '@better-scroll/core' // 我在项目中只是为了滚动效果
export default {
  name: '',
  updated () {
    this.$nextTick(() => {
      if (this.scroll === null) {
        const wrapper = document.querySelector('.wrapper')
        this.scroll = new BScroll(wrapper, {  // 减少Dom更新
          scrollY: true,
          click: true,
          useTransition: true
        })
      }
    })
  },
  data () {
    return {
      scroll: null
    }
  },
</script>

这里要注意的是，better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略
有些人认为这个初始化函数需要写在Dom 创建完成之后，也就是mounted钩子函数。
但是我在实际操作的时候遇到一个问题：如果把new BScroll() 初始化函数写在mounted钩子函数里面，页面初始化加载的时候，组件不生效，只有切换页面再切回来后，方可生效（懂得大神指教一下！），最后我才决定把初始化函数放在uopdated 钩子函数里

第一次投稿，创文不易，如果你觉得不错，请点赞鼓励！！！内容有误地方还请指教，你们的言语将成为我的最大的动力！！！

在后续开发中，遇到一个问题，一直困扰着我，首次加载无法滚动，刷新页面就好了。直到看到佐宗兄的这篇文章后，立马恍然大悟
https://blog.csdn.net/weixin_46242909/article/details/114117224（地址我放这里了，如有侵权，立马删除，勿怪！）
注：这个情况个人而定，有很多方法，比如nextTick（）的解决方案，只是在我的项目中，设置后还是无法滚动。