×

微信小程序之上拉加载与下拉刷新

96
一斤代码 595a1b60 08f6 4beb 998f 2bf55e230555
2018.03.03 19:38* 字数 1618

在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止(我们是有底线的-o-),我们称之为上拉加载,从技术角度来说,也可以称之为触底加载

这种方式其实是PC端分页浏览的一个分页形式变种,很多PC网页也会采用这种方式来进行内容分页加载,以替代比较古老的1,2,3,4,5,6,7...分页(称之为有页码的分页,这种分页方式其实在一些场景下仍然是非常有用的,特别是在后台管理系统页面中需要精确抵达某一数据页的场景)。

另一种在移动端常见的操作,就是像在刷微博或微信朋友圈的时候,我想看看有没有新的内容出现,就会在页面到顶的时候,将页面从上往下拖拉(这个时候页顶通常会出现一个转动的菊花之类的),然后放开手指,伴随着一声清脆的叮铃咚隆声,页面上呈现出了你朋友新鲜出炉的自拍照或鸡汤文。

这种向下拖拉刷新的交互方式(简称下拉刷新),在移动端可以说是一种非常自然且方便的操作,在现在的移动应用中被广泛采用。

好了,上面简要介绍了一下我们今天要关注的两个交互方式,目的当然是要在微信小程序中来实现它们。其实,微信小程序提供的技术框架已经为我们做了很多事情,让这两种交互实现起来变得相对很容易了。

下面我们就来一一讲解具体的代码实现。

上拉加载

前面我们已经了解到下拉加载的本质是一个分页加载,每次触发加载下一页的条件是当前页面到达底部,因此,我们可以整理出一个实现的基本思路:

  1. 初始页号为1,向后端请求第一页数据(数据中包含数据总条数,及当前页的数据数组),返回后渲染该该页数据
  2. 监听页面是否被滚动到底部,是的话,则递增页号(+1)并向后端请求该新页号的数据,返回结果后,将该页数据添加到之前已加载的数据后面,并重新渲染
  3. 重复步骤2的操作

这个流程是不是很好理解?感觉实现起来也不难,主要就是其中的“监听页面是否被滚动到底部”如何来实现?在Web页面开发中,我们会通过监听window.onscroll事件,在该事件的处理方法中获取当前页的高度和滚动量,以此来计算判断页面是否已滚动到底。而在微信小程序中,我们并不需要自己来计算,小程序的Page已提供现成的监听用户上拉触底事件的处理函数:onReachBottom,它会在页面触底的时候自动触发(或在距离页底一定距离的时候触发,可设置)。

那么按照上面的原理,实现出来的小程序代码将会是什么样子?假设我们的例子是一个加载文章列表的页面,下面是article.js代码:

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

Page({

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

  onLoad(options) {
    // 页面初次加载,请求第一页数据
    this.fetchArticleList(1)
  },

  onReachBottom() {
    // 下拉触底,先判断是否有请求正在进行中
    // 以及检查当前请求页数是不是小于数据总页数,如符合条件,则发送请求
    if (!this.loading && this.data.page < this.data.pages) {
      this.fetchArticleList(this.data.page + 1)
    }
  },

  fetchArticleList(pageNo) {
    this.loading = true

    // 向后端请求指定页码的数据
    return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     //当前的页号
        pages: res.pages,  //总页数
        articles: this.data.articles.concat(articles)
      })
    }).catch(err => {
      console.log("==> [ERROR]", err)
    }).then(() => {
      this.loading = false
    })
  }

})

从示例代码中看到,我们发送和处理返回数据的函数主要就是fetchArticleList了,它分别在页面初始化onLoad时被调用一次,以及每次在上拉触底触发onReachBottom时被调用。

下拉刷新

再来说下拉刷新,在小程序里面实现起来可能比起上拉加载更简单一些呢。只要在小程序的全局配置文件app.json的window部分或在每个Page的同名配置文件里,加入一个值为true的enablePullDownRefresh配置项,并在需要处理下拉事件的Page代码中加入onPullDownRefresh函数,就能开始接收下拉事件并进行你自己的处理逻辑了,当处理完成后,记得一定要调用wx.stopPullDownRefresh来终止下拉刷新。

我们仍然来根据上面的文章列表的例子,来实现下拉刷新:

首先是配置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() {
    // 下拉触底,先判断是否有请求正在进行中
    // 以及检查当前请求页数是不是小于数据总页数,如符合条件,则发送请求
    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

    // 向后端请求指定页码的数据
    return getArticles(pageNo).then(res => {
      const articles = res.items
      this.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触发,效果与用户手动下拉刷新一致。

其他

上面介绍的上拉加载和下拉刷新,都是针对整个Page的。如果你需要局部的相应功能,你可以尝试使用<scroll-view>做容器,并通过它的bindscrolltoupperbindscrolltolower来监听内容到顶或到底的事件,模拟实现出上拉加载和下拉刷新功能。

最近,我决定把简书的打赏功能关闭了(虽然以前也没多少朋友给我打赏,哈哈),同时感谢每一个浏览我文章或给我打赏的朋友。后面我会继续写作高质量的文章给大家,而在文章末尾我会附上一些不那么讨厌的、可能还会比较有用的小广告,希望通过这种方式,在给到大家帮助的同时给自己也增加点小小的收入吧:)
1.阿里云通用最高1000元代金券
2.阿里云服务器1核1G仅需293元/年
3.首次购买高性能企业级云服务器享5折优惠

微信小程序专栏
微信小程序专栏
4.6万字 · 81.5万阅读 · 1500人关注
Web note ad 1