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

2023-12-28    分类: 网站建设

在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,直到没有新内容为止(我们是有底线的-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。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都app开发公司