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

其实这种方法是PC端分页浏览的分页形式有很多变化PC网页也会用这种方式加载内容分页，以取代1、2、3、4、5、6、6、6、6、6、6、6、6、6、5、6、6、6、5、6、6、6、6、5、6、6、5、6、6、5、6、6、6、5、6、5、6、6、5、6、6、5、6、6、6、6、5、6、6、5、6、5、6、6、5、6、6、5、6、6、5、6、5、6、5、6、6、5、6、5、6、6、6、5、6、6、6、5、6、6、5、6、6、6、6、6、5、6、6、6、5、6、6、6、6、6、5、6、6、5、6、6、5、6、5、6、6、6、5、6、6、6、6、5、6、6、6、6、5、6、6、6、5、6、6、6、5、6、6、6、6、6、5、6、6、6、5、6、6、6、6、5、6、6、6、6、5、6、6、6、6、5、6、6、6、6、6、6、6、5、6、6、6、6、5、6、6、6、6、6、5、6、6、6、6、6、5、6、6、6、5、6、6、6、6、6、5、6、6、5、6、6、6、5、6、6、6、6、5、6、6、6、6、5、6、6、6、6、6、5、6、6、6、6、6、5、6、6、6、5、6、5、6、5、6、6、5、6、6、6、5、6、6、6、6、6、5、6、6、6、6、5、6、6、6、6、6、5、5、6、6、5、6、5、6、6、5、5、6、6、6、5、6、6、6、6、6、6、6、6、6、6、6、6、5、6、6、6、6、6、5、5、6、6、5、6、5、6、6、6、67...分页(称为有页码的分页，在某些场景下仍然非常有用，尤其是在后台管理系统页面中需要准确到达某个数据页面的场景)。

另一个常见的操作在移动终端，当我刷微博或微信朋友圈时，我想看看是否有新内容。当页面到达顶部时，我会从上到下拖动页面（此时，页面顶部通常会出现旋转菊花等），然后松开手指，伴随着清脆的叮当声，页面上出现了你朋友的新鲜 ** 照片或鸡汤文。

这种向下拖拉刷新的交互方式(简称下拉刷新)可以说是移动终端非常自然方便的操作，广泛应用于当前的移动应用。

嗯，以上简要介绍了我们今天应该关注的两种互动方式。当然，目的是在微信小程序中实现它们。事实上，微信小程序提供的技术框架为我们做了很多事情，这使得这两种互动相对容易实现。

让我们逐一解释具体的代码实现。

上拉加载

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

初始页面号为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 ， 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    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:// ** .jianshu.com/p/d89e79d09e ** 作权属于作者。请联系作者获得商业转载的授权，请注明非商业转载的来源。