在移動端铭若，隨著手指不斷向上滑動洪碳，當(dāng)內(nèi)容將要到達(dá)屏幕底部的時候，頁面會隨之不斷的加載后續(xù)內(nèi)容叼屠，直到?jīng)]有新內(nèi)容為止（我們是有底線的-o-）瞳腌，我們稱之為上拉加載，從技術(shù)角度來說镜雨，也可以稱之為觸底加載嫂侍。
這種方式其實是PC端分頁瀏覽的一個分頁形式變種，很多PC網(wǎng)頁也會采用這種方式來進(jìn)行內(nèi)容分頁加載荚坞，以替代比較古老的1,2,3,4,5,6,7...分頁（稱之為有頁碼的分頁挑宠，這種分頁方式其實在一些場景下仍然是非常有用的，特別是在后臺管理系統(tǒng)頁面中需要精確抵達(dá)某一數(shù)據(jù)頁的場景）西剥。
另一種在移動端常見的操作痹栖，就是像在刷微博或微信朋友圈的時候，我想看看有沒有新的內(nèi)容出現(xiàn)瞭空，就會在頁面到頂?shù)臅r候揪阿，將頁面從上往下拖拉（這個時候頁頂通常會出現(xiàn)一個轉(zhuǎn)動的菊花之類的），然后放開手指咆畏，伴隨著一聲清脆的叮鈴咚隆聲南捂，頁面上呈現(xiàn)出了你朋友新鮮出爐的自拍照或雞湯文。
這種向下拖拉刷新的交互方式（簡稱下拉刷新）旧找，在移動端可以說是一種非常自然且方便的操作溺健，在現(xiàn)在的移動應(yīng)用中被廣泛采用。
好了钮蛛，上面簡要介紹了一下我們今天要關(guān)注的兩個交互方式鞭缭，目的當(dāng)然是要在微信小程序中來實現(xiàn)它們。其實魏颓，微信小程序提供的技術(shù)框架已經(jīng)為我們做了很多事情岭辣，讓這兩種交互實現(xiàn)起來變得相對很容易了。
下面我們就來一一講解具體的代碼實現(xiàn)甸饱。
上拉加載
前面我們已經(jīng)了解到下拉加載的本質(zhì)是一個分頁加載沦童，每次觸發(fā)加載下一頁的條件是當(dāng)前頁面到達(dá)底部，因此叹话，我們可以整理出一個實現(xiàn)的基本思路：
初始頁號為1偷遗，向后端請求第一頁數(shù)據(jù)（數(shù)據(jù)中包含數(shù)據(jù)總條數(shù)，及當(dāng)前頁的數(shù)據(jù)數(shù)組）驼壶，返回后渲染該該頁數(shù)據(jù)
監(jiān)聽頁面是否被滾動到底部氏豌，是的話，則遞增頁號(+1)并向后端請求該新頁號的數(shù)據(jù)热凹，返回結(jié)果后泵喘，將該頁數(shù)據(jù)添加到之前已加載的數(shù)據(jù)后面瞭吃，并重新渲染
重復(fù)步驟2的操作
這個流程是不是很好理解？感覺實現(xiàn)起來也不難涣旨，主要就是其中的“監(jiān)聽頁面是否被滾動到底部”如何來實現(xiàn)？在Web頁面開發(fā)中股冗，我們會通過監(jiān)聽window.onscroll事件霹陡，在該事件的處理方法中獲取當(dāng)前頁的高度和滾動量，以此來計算判斷頁面是否已滾動到底止状。而在微信小程序中烹棉，我們并不需要自己來計算，小程序的Page已提供現(xiàn)成的監(jiān)聽用戶上拉觸底事件的處理函數(shù)：onReachBottom怯疤，它會在頁面觸底的時候自動觸發(fā)（或在距離頁底一定距離的時候觸發(fā)浆洗，可設(shè)置）。
那么按照上面的原理集峦，實現(xiàn)出來的小程序代碼將會是什么樣子伏社？假設(shè)我們的例子是一個加載文章列表的頁面，下面是article.js代碼：
import{getArticles}from'../../services/article.service'Page({data:{page:1,pages:0,articles:[]},onLoad(options){// 頁面初次加載塔淤，請求第一頁數(shù)據(jù)this.fetchArticleList(1)},onReachBottom(){// 下拉觸底摘昌，先判斷是否有請求正在進(jìn)行中// 以及檢查當(dāng)前請求頁數(shù)是不是小于數(shù)據(jù)總頁數(shù)，如符合條件高蜂，則發(fā)送請求if(!this.loading&&this.data.page<this.data.pages){this.fetchArticleList(this.data.page+1)}},fetchArticleList(pageNo){this.loading=true// 向后端請求指定頁碼的數(shù)據(jù)returngetArticles(pageNo).then(res=>{constarticles=res.itemsthis.setData({page:pageNo,//當(dāng)前的頁號pages:res.pages,//總頁數(shù)articles:this.data.articles.concat(articles)})}).catch(err=>{console.log("==> [ERROR]",err)}).then(()=>{this.loading=false})}})
從示例代碼中看到聪黎，我們發(fā)送和處理返回數(shù)據(jù)的函數(shù)主要就是fetchArticleList了，它分別在頁面初始化onLoad時被調(diào)用一次备恤，以及每次在上拉觸底觸發(fā)onReachBottom時被調(diào)用稿饰。
下拉刷新
再來說下拉刷新，在小程序里面實現(xiàn)起來可能比起上拉加載更簡單一些呢露泊。只要在小程序的全局配置文件app.json的window部分或在每個Page的同名配置文件里喉镰，加入一個值為true的enablePullDownRefresh配置項，并在需要處理下拉事件的Page代碼中加入onPullDownRefresh函數(shù)滤淳，就能開始接收下拉事件并進(jìn)行你自己的處理邏輯了梧喷，當(dāng)處理完成后，記得一定要調(diào)用wx.stopPullDownRefresh來終止下拉刷新脖咐。
我們?nèi)匀粊砀鶕?jù)上面的文章列表的例子铺敌，來實現(xiàn)下拉刷新：
首先是配置article.json:
{"enablePullDownRefresh":true}
然后在article.js中進(jìn)行如下改寫：
import{getArticles}from'../../services/article.service'Page({data:{page:1,pages:0,articles:[]},onLoad(options){// 頁面初次加載，請求第一頁數(shù)據(jù)this.fetchArticleList(1,true)},onReachBottom(){// 下拉觸底屁擅，先判斷是否有請求正在進(jìn)行中// 以及檢查當(dāng)前請求頁數(shù)是不是小于數(shù)據(jù)總頁數(shù)偿凭，如符合條件，則發(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// 向后端請求指定頁碼的數(shù)據(jù)returngetArticles(pageNo).then(res=>{constarticles=res.itemsthis.setData({page:pageNo,//當(dāng)前的頁號pages:res.pages,//總頁數(shù)articles:override?article:this.data.articles.concat(articles)})}).catch(err=>{console.log("==> [ERROR]",err)}).then(()=>{this.loading=false})}})
可以看到弯囊，我們增加了一個onPullDownRefresh函數(shù)并在里面調(diào)用了fetchArticleList去請求第一頁的數(shù)據(jù)痰哨，并且fetchArticleList函數(shù)也稍稍做了一下改動，加了一個參數(shù)override匾嘱，用于重置articles數(shù)據(jù)斤斧，而不是像上拉加載時那樣一直在原有數(shù)據(jù)后面進(jìn)行添加。
另外霎烙，下拉刷新的事件也可以通過調(diào)用APIwx.startPullDownRefresh觸發(fā)撬讽，效果與用戶手動下拉刷新一致。
其他
上面介紹的上拉加載和下拉刷新悬垃，都是針對整個Page的游昼。如果你需要局部的相應(yīng)功能，你可以嘗試使用<scroll-view>做容器尝蠕，并通過它的bindscrolltoupper和bindscrolltolower來監(jiān)聽內(nèi)容到頂或到底的事件烘豌，模擬實現(xiàn)出上拉加載和下拉刷新功能。
作者：一斤代碼
鏈接：http://www.reibang.com/p/d89e79d09e64
來源：簡書
著作權(quán)歸作者所有看彼。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)廊佩，非商業(yè)轉(zhuǎn)載請注明出處。
