微信小程序之上拉加載與下拉刷新

在移動(dòng)端，隨著手指不斷向上滑動(dòng)，當(dāng)內(nèi)容將要到達(dá)屏幕底部的時(shí)候，頁(yè)面會(huì)隨之不斷的加載后續(xù)內(nèi)容，直到?jīng)]有新內(nèi)容為止（我們是有底線的-o-），我們稱(chēng)之為上拉加載，從技術(shù)角度來(lái)說(shuō)，也可以稱(chēng)之為觸底加載。

這種方式其實(shí)是PC端分頁(yè)瀏覽的一個(gè)分頁(yè)形式變種，很多PC網(wǎng)頁(yè)也會(huì)采用這種方式來(lái)進(jìn)行內(nèi)容分頁(yè)加載，以替代比較古老的1,2,3,4,5,6,7...分頁(yè)（稱(chēng)之為有頁(yè)碼的分頁(yè)，這種分頁(yè)方式其實(shí)在一些場(chǎng)景下仍然是非常有用的，特別是在后臺(tái)管理系統(tǒng)頁(yè)面中需要精確抵達(dá)某一數(shù)據(jù)頁(yè)的場(chǎng)景）。

另一種在移動(dòng)端常見(jiàn)的操作，就是像在刷微博或微信朋友圈的時(shí)候，我想看看有沒(méi)有新的內(nèi)容出現(xiàn)，就會(huì)在頁(yè)面到頂?shù)臅r(shí)候，將頁(yè)面從上往下拖拉（這個(gè)時(shí)候頁(yè)頂通常會(huì)出現(xiàn)一個(gè)轉(zhuǎn)動(dòng)的菊花之類(lèi)的），然后放開(kāi)手指，伴隨著一聲清脆的叮鈴咚隆聲，頁(yè)面上呈現(xiàn)出了你朋友新鮮出爐的自拍照或雞湯文。

這種向下拖拉刷新的交互方式（簡(jiǎn)稱(chēng)下拉刷新），在移動(dòng)端可以說(shuō)是一種非常自然且方便的操作，在現(xiàn)在的移動(dòng)應(yīng)用中被廣泛采用。

好了，上面簡(jiǎn)要介紹了一下我們今天要關(guān)注的兩個(gè)交互方式，目的當(dāng)然是要在微信小程序中來(lái)實(shí)現(xiàn)它們。其實(shí)，微信小程序提供的技術(shù)框架已經(jīng)為我們做了很多事情，讓這兩種交互實(shí)現(xiàn)起來(lái)變得相對(duì)很容易了。

下面我們就來(lái)一一講解具體的代碼實(shí)現(xiàn)。

上拉加載

前面我們已經(jīng)了解到下拉加載的本質(zhì)是一個(gè)分頁(yè)加載，每次觸發(fā)加載下一頁(yè)的條件是當(dāng)前頁(yè)面到達(dá)底部，因此，我們可以整理出一個(gè)實(shí)現(xiàn)的基本思路：

初始頁(yè)號(hào)為1，向后端請(qǐng)求第一頁(yè)數(shù)據(jù)（數(shù)據(jù)中包含數(shù)據(jù)總條數(shù)，及當(dāng)前頁(yè)的數(shù)據(jù)數(shù)組），返回后渲染該該頁(yè)數(shù)據(jù)
監(jiān)聽(tīng)頁(yè)面是否被滾動(dòng)到底部，是的話，則遞增頁(yè)號(hào)(+1)并向后端請(qǐng)求該新頁(yè)號(hào)的數(shù)據(jù)，返回結(jié)果后，將該頁(yè)數(shù)據(jù)添加到之前已加載的數(shù)據(jù)后面，并重新渲染
重復(fù)步驟2的操作

這個(gè)流程是不是很好理解？感覺(jué)實(shí)現(xiàn)起來(lái)也不難，主要就是其中的“監(jiān)聽(tīng)頁(yè)面是否被滾動(dòng)到底部”如何來(lái)實(shí)現(xiàn)？在Web頁(yè)面開(kāi)發(fā)中，我們會(huì)通過(guò)監(jiān)聽(tīng)window.onscroll事件，在該事件的處理方法中獲取當(dāng)前頁(yè)的高度和滾動(dòng)量，以此來(lái)計(jì)算判斷頁(yè)面是否已滾動(dòng)到底。而在微信小程序中，我們并不需要自己來(lái)計(jì)算，小程序的Page已提供現(xiàn)成的監(jiān)聽(tīng)用戶(hù)上拉觸底事件的處理函數(shù)：onReachBottom，它會(huì)在頁(yè)面觸底的時(shí)候自動(dòng)觸發(fā)（或在距離頁(yè)底一定距離的時(shí)候觸發(fā)，可設(shè)置）。

那么按照上面的原理，實(shí)現(xiàn)出來(lái)的小程序代碼將會(huì)是什么樣子？假設(shè)我們的例子是一個(gè)加載文章列表的頁(yè)面，下面是article.js代碼：

import { getArticles } from '../../services/article.service'

Page({

  data: {
    page: 1,
    pages: 0,
    articles: []
  },

  onLoad(options) {
    // 頁(yè)面初次加載，請(qǐng)求第一頁(yè)數(shù)據(jù) this.fetchArticleList(1)
  },

  onReachBottom() {
    // 下拉觸底，先判斷是否有請(qǐng)求正在進(jìn)行中 // 以及檢查當(dāng)前請(qǐng)求頁(yè)數(shù)是不是小于數(shù)據(jù)總頁(yè)數(shù)，如符合條件，則發(fā)送請(qǐng)求 if (!this.loading && this.data.page < this.data.pages) {
      this.fetchArticleList(this.data.page + 1)
    }
  },

  fetchArticleList(pageNo) {
    this.loading = true // 向后端請(qǐng)求指定頁(yè)碼的數(shù)據(jù) return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     //當(dāng)前的頁(yè)號(hào)
        pages: res.pages,  //總頁(yè)數(shù)
        articles: this.data.articles.concat(articles)
      })
    }).catch(err => {
      console.log("==> [ERROR]", err)
    }).then(() => {
      this.loading = false
    })
  }

})
從示例代碼中看到，我們發(fā)送和處理返回?cái)?shù)據(jù)的函數(shù)主要就是fetchArticleList了，它分別在頁(yè)面初始化onLoad時(shí)被調(diào)用一次，以及每次在上拉觸底觸發(fā)onReachBottom時(shí)被調(diào)用。

下拉刷新

再來(lái)說(shuō)下拉刷新，在小程序里面實(shí)現(xiàn)起來(lái)可能比起上拉加載更簡(jiǎn)單一些呢。只要在小程序的全局配置文件app.json的window部分或在每個(gè)Page的同名配置文件里，加入一個(gè)值為true的enablePullDownRefresh配置項(xiàng)，并在需要處理下拉事件的Page代碼中加入onPullDownRefresh函數(shù)，就能開(kāi)始接收下拉事件并進(jìn)行你自己的處理邏輯了，當(dāng)處理完成后，記得一定要調(diào)用wx.stopPullDownRefresh來(lái)終止下拉刷新。

我們?nèi)匀粊?lái)根據(jù)上面的文章列表的例子，來(lái)實(shí)現(xiàn)下拉刷新：

首先是配置article.json:

{
  "enablePullDownRefresh": true
}
然后在article.js中進(jìn)行如下改寫(xiě)：

import { getArticles } from '../../services/article.service'

Page({

  data: {
    page: 1,
    pages: 0,
    articles: []
  },

  onLoad(options) {
    // 頁(yè)面初次加載，請(qǐng)求第一頁(yè)數(shù)據(jù) this.fetchArticleList(1, true)
  },

  onReachBottom() {
    // 下拉觸底，先判斷是否有請(qǐng)求正在進(jìn)行中 // 以及檢查當(dāng)前請(qǐng)求頁(yè)數(shù)是不是小于數(shù)據(jù)總頁(yè)數(shù)，如符合條件，則發(fā)送請(qǐng)求 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 // 向后端請(qǐng)求指定頁(yè)碼的數(shù)據(jù) return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     //當(dāng)前的頁(yè)號(hào)
        pages: res.pages,  //總頁(yè)數(shù)
        articles: override ? article : this.data.articles.concat(articles)
      })
    }).catch(err => {
      console.log("==> [ERROR]", err)
    }).then(() => {
      this.loading = false
    })
  }

})
可以看到，我們?cè)黾恿艘粋€(gè)onPullDownRefresh函數(shù)并在里面調(diào)用了fetchArticleList去請(qǐng)求第一頁(yè)的數(shù)據(jù)，并且fetchArticleList函數(shù)也稍稍做了一下改動(dòng)，加了一個(gè)參數(shù)override，用于重置articles數(shù)據(jù)，而不是像上拉加載時(shí)那樣一直在原有數(shù)據(jù)后面進(jìn)行添加。

另外，下拉刷新的事件也可以通過(guò)調(diào)用APIwx.startPullDownRefresh觸發(fā)，效果與用戶(hù)手動(dòng)下拉刷新一致。

其他

上面介紹的上拉加載和下拉刷新，都是針對(duì)整個(gè)Page的。如果你需要局部的相應(yīng)功能，你可以嘗試使用<scroll-view>做容器，并通過(guò)它的bindscrolltoupper和bindscrolltolower來(lái)監(jiān)聽(tīng)內(nèi)容到頂或到底的事件，模擬實(shí)現(xiàn)出上拉加載和下拉刷新功能。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前標(biāo)題：微信小程序之上拉加載與下拉刷新
路徑分享：http://www.bm7419.com/news18/310718.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、全網(wǎng)營(yíng)銷(xiāo)推廣、外貿(mào)建站、軟件開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)