前幾天分享了一個自己做的關于小程序組件擴展的開源項目（傳送門） 
本來就是想給自己發布的第一個開源代碼騙騙star，結果有不少善良的朋友給文章點贊了，搞得我有點不好意思，所以決定寫點干貨講講具體是怎么實現的。 
其實也比較簡單，首先自定義組件下的 scroll-view 高度設為比組件本身高出 40px，即頭部顯示刷新文字的區域高度，然后讓 scroll-view y軸偏移 -40px，這樣刷新文字區域就在頂部看不到了，具體css如下：

1. .scroll-view {
2. height: calc(100% + 40px);
3. transform: translateY(-40px);
4. }

然后就是監聽 scroll-view 的 onscroll 事件，這里我將下拉刷新的狀態分為五種：

1. //這段偷懶沒寫在代碼里，直接用的數字
2. const _pullDownStatusDic = {
3. invisiable: 0, //看不見
4. pulling: 1, //下拉時
5. release: 2, //可松開刷新時
6. refresing: 3, //正在刷新
7. finish: 4, //刷新完成
8. }

那么在事件監聽中根據當前的 scrollTop 來判斷應該在哪一種狀態：

1. //height就是預設的下拉至多少高度時刷新
2. if (scrollTop < -1 * height) {
3. targetStatus = 2;
4. } else if (scrollTop < 0) {
5. targetStatus = 1;
6. } else {
7. targetStatus = 0;
8. }

問題來了，什么時候刷新呢？小程序的 scroll-view 并沒有 onscrollend 這種事件，于是我想到了 ontouchend，畢竟在手機上也只能用觸摸來滑動（點擊頭部返回頂部除外），所以只需要在 ontouchend 事件中監聽如果當前的下拉狀態是2（_pullDownStatusDic.release）即松開可刷新時，就觸發刷新：

1. if (status === 2) {
2. this.setData({
3. pullDownStatus: 3,
4. })
5. this.properties.refreshing = true,
6. this.triggerEvent('pulldownrefresh');
7. }

當然這個時候還有個問題，我們需要把刷新文字局域顯示出來，我們是沒辦法吧一個 scroll-view 的 scrollTop 設為負數的，所以只能將 scroll-view 的y軸偏移取消來解決（產生的問題就是松手時會有一下彈動，后期會想辦法進行優化）  完成刷新后，再將 scroll-view 的y軸偏移通過css動畫再變回 -40px（用 translate 而不用 margin 就是為了此處動畫的流暢度），這樣就完成了一次下拉刷新。

是不是很簡單：）  另外還有一些小細節，還有加載更多，還有 xing-image 的一些實現，就更簡單了，有興趣的可以看看源碼