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

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

然后就是監(jiān)聽 scroll-view 的 onscroll 事件，這里我將下拉刷新的狀態(tài)分為五種：

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

那么在事件監(jiān)聽中根據(jù)當(dāng)前的 scrollTop 來(lái)判斷應(yīng)該在哪一種狀態(tài)：

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

問(wèn)題來(lái)了，什么時(shí)候刷新呢？小程序的 scroll-view 并沒(méi)有 onscrollend 這種事件，于是我想到了 ontouchend，畢竟在手機(jī)上也只能用觸摸來(lái)滑動(dòng)（點(diǎn)擊頭部返回頂部除外），所以只需要在 ontouchend 事件中監(jiān)聽如果當(dāng)前的下拉狀態(tài)是2（_pullDownStatusDic.release）即松開可刷新時(shí)，就觸發(fā)刷新：

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

當(dāng)然這個(gè)時(shí)候還有個(gè)問(wèn)題，我們需要把刷新文字局域顯示出來(lái)，我們是沒(méi)辦法吧一個(gè) scroll-view 的 scrollTop 設(shè)為負(fù)數(shù)的，所以只能將 scroll-view 的y軸偏移取消來(lái)解決（產(chǎn)生的問(wèn)題就是松手時(shí)會(huì)有一下彈動(dòng)，后期會(huì)想辦法進(jìn)行優(yōu)化）  完成刷新后，再將 scroll-view 的y軸偏移通過(guò)css動(dòng)畫再變回 -40px（用 translate 而不用 margin 就是為了此處動(dòng)畫的流暢度），這樣就完成了一次下拉刷新。

是不是很簡(jiǎn)單：）  另外還有一些小細(xì)節(jié)，還有加載更多，還有 xing-image 的一些實(shí)現(xiàn)，就更簡(jiǎn)單了，有興趣的可以看看源碼