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

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

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

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

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

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

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

上拉加载

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

初始页号为1，向后端请求第一页数据（数据中包含数据总条数，及当前页的数据数组），返回后渲染该该页数据
监听页面是否被滚动到底部，是的话，则递增页号(+1)并向后端请求该新页号的数据，返回结果后，将该页数据添加到之前已加载的数据后面，并重新渲染
重复步骤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>做容器，并通过它的bindscrolltoupper和bindscrolltolower来监听内容到顶或到底的事件，模拟实现出上拉加载和下拉刷新功能。

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

当前标题：微信小程序之上拉加载与下拉刷新
路径分享：https://www.cdcxhl.com/news18/310718.html

成都网站建设公司_创新互联，为您提供企业建站、全网营销推广、外贸建站、软件开发、移动网站建设、外贸网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联