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

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

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

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

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

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

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

上拉加載

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

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

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

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

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

Page({

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

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

  onReachBottom() {
    // 下拉觸底，先判斷是否有請求正在進行中 // 以及檢查當前請求頁數(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ù) return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     //當前的頁號
        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ù)，就能開始接收下拉事件并進行你自己的處理邏輯了，當處理完成后，記得一定要調(diào)用wx.stopPullDownRefresh來終止下拉刷新。

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

首先是配置article.json:

{
  "enablePullDownRefresh": true
}
然后在article.js中進行如下改寫：

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

Page({

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

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

  onReachBottom() {
    // 下拉觸底，先判斷是否有請求正在進行中 // 以及檢查當前請求頁數(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ù) return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     //當前的頁號
        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ù)后面進行添加。

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

其他

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

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

當前標題：微信小程序之上拉加載與下拉刷新
路徑分享：http://m.kartarina.com/news18/310718.html

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

廣告

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