重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
微信小程序之上拉加载与下拉刷新
在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，直到没有新内容为止（我们是有底线的-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触发，效果与用户手动下拉刷新一致。
其他
当前名称：微信小程序之上拉加载与下拉刷新
浏览地址：http://cqcxhl.cn/view/310718.html
这种方式其实是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的。如果你需要局部的相应功能，你可以尝试使用
本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！
当前名称：微信小程序之上拉加载与下拉刷新
浏览地址：http://cqcxhl.cn/view/310718.html