首页客户案例高端网站建设SEO优化小程序APP开发抖音 X 获客网络营销关于动态联系咨询

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

在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止(我们是有底线的-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来监听内容到顶或到底的事件,模拟实现出上拉加载和下拉刷新功能。


本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

日期:2018年04月02日

标签: 网站设计公司 、 网站建设公司 、 网站制作 、 网站设计 、 网站建设 、 广州网站设计公 司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码15876521776免费获取诊断报告