今天第一次使用better-scroll，折騰了兩個小時，滾動效果始終不行。
先上官網地址：https://github.com/ustbhuangyi/better-scroll

一，滾動失效原因

1，先確認安裝了better-scroll，並且成功引入：

確認安裝：

引入：值得注意的是官網中這個“BScroll”前兩個字母是大寫的，後續要統一，很多文章中的程式碼只有B是大寫。

import BScroll from '@better-scroll/core'

2，保證滾動的html結構正確

官網的結構是：

也就是說better-scroll它只給第一個標籤（就是class="content"那個ul）新增滾動效果，所以滾動的內容統統都要放置在這裡面

3，保證wrapper的高度小於content的高度

這裡要說明它滾動的原理，就需要悄咪咪地盜用一下這張圖:

綠色部分為 wrapper，也就是父容器，它會有固定的高度。黃色部分為 content，它是父容器的第一個子元素，它的高度會隨著內容的大小而撐高。那麼，當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動內容區了，這就是 better-scroll 的滾動原理。
審查元素看高度也好，列印scroll物件檢視高度資訊也可以：

mounted() {
			this.scroll = new BScroll(this.$refs.wrapper, {})
			console.log(this.scroll)
		}

1256>600，這個條件是滿足的

4，wrapper需要設定一些特定的樣式

position: absolute;
left: 0;
top: 0;
overflow: hidden;

最主要的就是overflow hidden!

5,可以檢視content的樣式，這個外掛的樣式畢竟是新增在它身上的。

我的沒出現！！心好痛，然後我滑鼠滾輪怎麼滾都不行。這是一個悲傷的故事！！待會說~~

6，滾動失效還有一種原因，就是新增滾動樣式的時機不對

正確的時機應該是等頁面的元素都渲染完畢之後。
所以需要放置在vue的生命週期函式之中。

但是有些時候還不行，那就把它整成非同步，放在setTimeout裡面。
當然，整成非同步，vue提供了一個方法：Vue.$nextTick()

<script>
	import BScroll from '@better-scroll/core'
	export default{
		mounted() {
			 this.$nextTick(() => {
				this.scroll = new BScroll(this.$refs.wrapper, {})
			})
		}
	}
</script>

在排查了近兩個小時之後，我快絕望了。為啥我還是滾動不了。正當我痛哭流涕以頭搶地之時，不再使用滾輪滾動，而是長按滑鼠滑動時！居然居然！居然闊以惹！！！
原來我寫的都是對的！！
只是better-scroll外掛使用之後，預設移動端是滑鼠按住不放才能滑動！而不是用滑鼠滾輪滾動！！
這特麼！！！？？？？
然後content的樣式也是在滑動之後才出現：

我沒有哭！！！！