-
13739719116
-
-
微信小程序如何实现上拉加载更多？
微信小程序就是一款小巧、界面简约的小应用领域平台，越来越受用户的热烈欢迎。在研发小程序的过程中，不仅须要同时实现基本的功能，还须要考量全面性能，包含体验性能和时间性能。其中，上拉读取更多就是一个常用的功能，那么微信小程序如何同时实现上拉读取更多功能呢？
1.前置科学知识
在已经开始之前，我们须要先介绍一些基本概念，包含scroll-view组件、下拉创下以及上拉读取更多。其中，scroll-view就是一个可以翻转的视图容器，可以在其中置放远远超过屏幕的内容。而下拉创下和上拉读取更多就是用户操作方式页面时的两种交互方式。
2.同时实现步骤
第一步：给scroll-view标签嵌入bindscrolltolower和scroll-top属性，如下右图：
其中，bindscrolltolower事件就是上拉读取更多的事件，而scroll-top用作设置scroll-view距离顶部的高度。
第二步：在Page()中嵌入scrollToLower函数，如下右图：
scrollToLower: function () {
},
这里的scrollToLower函数就是我们同时实现上拉读取更多的核心代码了。
第三步：在scrollToLower函数中，我们须要搞的第一件事情就是对page属性展开更新。page可以认知成一个计数器，则表示当前读取了多少页的数据。为了同时实现上拉读取更多，我们须要不断地减少page的值。我们可以采用setData()方法同时实现对page属性的更新：
scrollToLower: function () {
let page = this.data.page
this.setData({
page: page+1
})
}
第四步：接下来，我们须要根据page的值，命令后台USB以获取适当的数据，并将数据更新至页面上。这一步须要在尚无数据的基础上，嵌入崭新以获取至的数据。追加数据采用JS中的concat()方法，具体内容代码如下：
scrollToLower: function () {
let page = this.data.page
this.setData({
page: page+1
})
let that = this
wx.request({
url: 'xxxxxx',
data: {
page: page
},
success: function (res) {
that.setData({
list: that.data.list.concat(res.data)
})
}
})
}
其中xxxxxx则表示后台USB的地址。
第五步：如果已经没更多数据可以读取了，我们须要在上拉读取更多的事件bindscrolltolower中嵌入一个推论，避免用户再次发动命令。推论的条件就是当回到的数据条数大于选定的count（每页数据的数量）时，表明没更多数据了。这时，我们须要通过setData()方法再次设置noMoreData为true，则表示不再存有更多数据可以读取。
scrollToLower: function () {
let page = this.data.page
this.setData({
page: page+1
})
let that = this
wx.request({
url: 'xxxxxx',
data: {
page: page
},
success: function (res) {
if (res.data.length < that.data.count) {
that.setData({
noMoreData: true
})
}
that.setData({
list: that.data.list.concat(res.data)
})
}
})
}
第六步：上拉读取更多的时候，我们须要在页面底部表明一个提示信息，说用户正在读取中。我们可以利用wx.showLoading()方法同时实现读取中提示信息，wx.hideLoading()方法同时实现读取顺利完成后的提示信息消失。在scrollToLower函数结尾调用wx.showLoading()，在顺利回到数据后调用wx.hideLoading()。
scrollToLower: function () {
let page = this.data.page
this.setData({
page: page+1
})
let that = this
wx.showLoading({
title: '读取中'
})
wx.request({
url: 'xxxxxx',
data: {
page: page
},
success: function (res) {
if (res.data.length < that.data.count) {
that.setData({
noMoreData: true
})
}
that.setData({
list: that.data.list.concat(res.data)
})
wx.hideLoading()
}
})
}
3.总结
通过以上步骤的同时实现，我们就可以在微信小程序中同时实现上拉读取更多的功能了。也正是因为微信小程序具有简洁明了的API和健全的生态体系，我们才能较为随心所欲地顺利完成这样一个大功能。期望本篇文章对大家有所协助。
数据IDC、软件开发、网站建设开发、系统开发、微信小程序开发、APP移动开发、SAAS定制开发、系统二开等。全行业互联网软件开发解决方案，产品经理一对一沟通需求。