在移動端，隨著手指不斷向上滑動，當內容將要到達屏幕底部的時候，頁面會隨之不斷的加載后續(xù)內容，直到沒有新內容為止（我們是有底線的-o-），我們稱之為上拉加載，從技術角度來說，也可以稱之為觸底加載。
這種方式其實是PC端分頁瀏覽的一個分頁形式變種，很多PC網頁也會采用這種方式來進行內容分頁加載，以替代比較古老的1,2,3,4,5,6,7...分頁（稱之為有頁碼的分頁，這種分頁方式其實在一些場景下仍然是非常有用的，特別是在后臺管理系統(tǒng)頁面中需要精確抵達某一數據頁的場景）。
另一種在移動端常見的操作，就是像在刷微博或微信朋友圈的時候，我想看看有沒有新的內容出現(xiàn)，就會在頁面到頂的時候，將頁面從上往下拖拉（這個時候頁頂通常會出現(xiàn)一個轉動的菊花之類的），然后放開手指，伴隨著一聲清脆的叮鈴咚隆聲，頁面上呈現(xiàn)出了你朋友新鮮出爐的自拍照或雞湯文。
這種向下拖拉刷新的交互方式（簡稱下拉刷新），在移動端可以說是一種非常自然且方便的操作，在現(xiàn)在的移動應用中被廣泛采用。
好了，上面簡要介紹了一下我們今天要關注的兩個交互方式，目的當然是要在微信小程序中來實現(xiàn)它們。其實，微信小程序提供的技術框架已經為我們做了很多事情，讓這兩種交互實現(xiàn)起來變得相對很容易了。
下面我們就來一一講解具體的代碼實現(xiàn)。
上拉加載
前面我們已經了解到下拉加載的本質是一個分頁加載，每次觸發(fā)加載下一頁的條件是當前頁面到達底部，因此，我們可以整理出一個實現(xiàn)的基本思路：
初始頁號為1，向后端請求第一頁數據（數據中包含數據總條數，及當前頁的數據數組），返回后渲染該該頁數據
監(jiān)聽頁面是否被滾動到底部，是的話，則遞增頁號(+1)并向后端請求該新頁號的數據，返回結果后，將該頁數據添加到之前已加載的數據后面，并重新渲染
重復步驟2的操作
這個流程是不是很好理解？感覺實現(xiàn)起來也不難，主要就是其中的“監(jiān)聽頁面是否被滾動到底部”如何來實現(xiàn)？在Web頁面開發(fā)中，我們會通過監(jiān)聽window.onscroll事件，在該事件的處理方法中獲取當前頁的高度和滾動量，以此來計算判斷頁面是否已滾動到底。而在微信小程序中，我們并不需要自己來計算，小程序的Page已提供現(xiàn)成的監(jiān)聽用戶上拉觸底事件的處理函數：onReachBottom，它會在頁面觸底的時候自動觸發(fā)（或在距離頁底一定距離的時候觸發(fā)，可設置）。
那么按照上面的原理，實現(xiàn)出來的小程序代碼將會是什么樣子？假設我們的例子是一個加載文章列表的頁面，下面是article.js代碼：
import{getArticles}from'../../services/article.service'Page({data:{page:1,pages:0,articles:[]},onLoad(options){// 頁面初次加載，請求第一頁數據this.fetchArticleList(1)},onReachBottom(){// 下拉觸底，先判斷是否有請求正在進行中// 以及檢查當前請求頁數是不是小于數據總頁數，如符合條件，則發(fā)送請求if(!this.loading&&this.data.page<this.data.pages){this.fetchArticleList(this.data.page+1)}},fetchArticleList(pageNo){this.loading=true// 向后端請求指定頁碼的數據returngetArticles(pageNo).then(res=>{constarticles=res.itemsthis.setData({page:pageNo,//當前的頁號pages:res.pages,//總頁數articles:this.data.articles.concat(articles)})}).catch(err=>{console.log("==> [ERROR]",err)}).then(()=>{this.loading=false})}})
從示例代碼中看到，我們發(fā)送和處理返回數據的函數主要就是fetchArticleList了，它分別在頁面初始化onLoad時被調用一次，以及每次在上拉觸底觸發(fā)onReachBottom時被調用。
下拉刷新
再來說下拉刷新，在小程序里面實現(xiàn)起來可能比起上拉加載更簡單一些呢。只要在小程序的全局配置文件app.json的window部分或在每個Page的同名配置文件里，加入一個值為true的enablePullDownRefresh配置項，并在需要處理下拉事件的Page代碼中加入onPullDownRefresh函數，就能開始接收下拉事件并進行你自己的處理邏輯了，當處理完成后，記得一定要調用wx.stopPullDownRefresh來終止下拉刷新。
我們仍然來根據上面的文章列表的例子，來實現(xiàn)下拉刷新：
首先是配置article.json:
{"enablePullDownRefresh":true}
然后在article.js中進行如下改寫：
import{getArticles}from'../../services/article.service'Page({data:{page:1,pages:0,articles:[]},onLoad(options){// 頁面初次加載，請求第一頁數據this.fetchArticleList(1,true)},onReachBottom(){// 下拉觸底，先判斷是否有請求正在進行中// 以及檢查當前請求頁數是不是小于數據總頁數，如符合條件，則發(fā)送請求if(!this.loading&&this.data.page<this.data.pages){this.fetchArticleList(this.data.page+1)}},onPullDownRefresh(){// 上拉刷新if(!this.loading){this.fetchArticleList(1,true).then(()=>{// 處理完成后，終止下拉刷新wx.stopPullDownRefresh()})}},fetchArticleList(pageNo,override){this.loading=true// 向后端請求指定頁碼的數據returngetArticles(pageNo).then(res=>{constarticles=res.itemsthis.setData({page:pageNo,//當前的頁號pages:res.pages,//總頁數articles:override?article:this.data.articles.concat(articles)})}).catch(err=>{console.log("==> [ERROR]",err)}).then(()=>{this.loading=false})}})
可以看到，我們增加了一個onPullDownRefresh函數并在里面調用了fetchArticleList去請求第一頁的數據，并且fetchArticleList函數也稍稍做了一下改動，加了一個參數override，用于重置articles數據，而不是像上拉加載時那樣一直在原有數據后面進行添加。
另外，下拉刷新的事件也可以通過調用APIwx.startPullDownRefresh觸發(fā)，效果與用戶手動下拉刷新一致。
其他
上面介紹的上拉加載和下拉刷新，都是針對整個Page的。如果你需要局部的相應功能，你可以嘗試使用<scroll-view>做容器，并通過它的bindscrolltoupper和bindscrolltolower來監(jiān)聽內容到頂或到底的事件，模擬實現(xiàn)出上拉加載和下拉刷新功能。
作者：一斤代碼
鏈接：http://m.itdecent.cn/p/d89e79d09e64
來源：簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
