变量

data: {videos: [],page: 1,pageSize: 8,isLastPage: false,tips: '上拉加载更多'
},

videos 数据容器
page 当前页数
pageSize 一页的数据量
isLastPage 当前是否最后一页
tips 页尾提示信息

上拉事件

onReachBottom: function () {// 最后一页了，取消下拉功能if (this.data.isLastPage) {return}this.setData({ page: this.data.page + 1 })this.requestVideos(this.data.activeIndex)
},

需要判断是否最后一页，不再响应加载，我这里直接return出函数了，requestVideos 是向服务器访问数据的自定义函数

你也可以在页面的.json文件中定义距离底部多少距离，响应上拉事件，我试了，感觉差别不大，没太多影响

请求

 requestVideos(index){// 发起请求wx.showLoading({title: '加载中',})var app = getApp()wx.request({url: app.globalData.request_domain + '/index/index/videos',data: { type: index, page: this.data.page },method: "POST",header: {'content-type': 'application/x-www-form-urlencoded'},success: (res) => {if (res.statusCode != 200 || res.data.code != 200) {app.showError()} else {wx.hideLoading()var newData = {}if (res.data.data.length < this.data.pageSize) {// 没有数据了，已经是最后一页newData.isLastPage = truenewData.tips = "已显示全部啦"}// 追加数据newData.videos = this.data.videos.concat(res.data.data)this.setData(newData)}},fail: () => {app.showError()}})}

Array.concat(Array) 将参数数组添加到调用数组中，形成新的数组
newData 是为了去保存可能存在需要刷新的分页数据
通过 pageSize 判断是否最后一页
showError() 是定义在 app 中的全局函数，就是显示几秒的错误提示

// 显示网络异常
showError: function () {wx.showToast({title: "网络异常",icon: 'loading'})
}

顺便提一点是微信小程序是有 icon 为 success 和 loading 的延时显示提示，没有错误的，你可以自定义图片路径在参数 image 中，来显示指定图标的提示

上面的函数你甚至可以定义传参来自定义提示内容

完整代码

以下是我小程序中所有 js 代码，因为我是有几个类型的视频，可以选择然后刷新，注意在页面有任何刷新的时候，都需要考虑分页数据的重置，当需要重置的次数很多，你当然需要把它放在一个函数中去调用


Page({data: {domain: getApp().globalData.resource_domain,activeIndex: 1,videos: [],page: 1,pageSize: 8,isLastPage: false,tips: '上拉加载更多'},onLoad: function() {this.requestVideos(1)},// 上拉加载更多onReachBottom: function () {// 最后一页了，取消下拉功能if (this.data.isLastPage) {return}this.setData({ page: this.data.page + 1 })this.requestVideos(this.data.activeIndex)},// 选择menuselector: function(e) {var index = e.currentTarget.dataset.index// 改变当前类，并重置分页数据this.setData({activeIndex: index,page: 1,isLastPage: false,tips: '上拉加载更多',videos: []})this.requestVideos(index)},/*** 请求视频集 1：一杆进洞 2：练习场 3：所有*/requestVideos(index){// 发起请求wx.showLoading({title: '加载中',})var app = getApp()wx.request({url: app.globalData.request_domain + '/index/index/videos',data: { type: index, page: this.data.page },method: "POST",header: {'content-type': 'application/x-www-form-urlencoded'},success: (res) => {if (res.statusCode != 200 || res.data.code != 200) {app.showError()} else {wx.hideLoading()var newData = {}if (res.data.data.length < this.data.pageSize) {// 没有数据了，已经是最后一页newData.isLastPage = truenewData.tips = "已显示全部啦"}// 追加数据newData.videos = this.data.videos.concat(res.data.data)this.setData(newData)}},fail: () => {app.showError()}})}
})

POST 请求需要修改 header，系统默认是 json

微信小程序如何上拉加载下一页相关推荐

微信小程序scroll-view上拉加载更多
微信小程序scroll-view上拉加载更多 1.wxml代码 <scroll-view class="scroll-view-container" scroll-ybind ...
uniapp微信小程序uni-load-more上拉加载更多数据
1.引入uni-app中uni-load-more.vue到自己的项目 import uniLoadMore from '@/components/uni-load-more/uni-load-mor ...
微信小程序实现上拉加载更多数据（分页加载）
前言: 该实例和我其他两篇文章息息相关,不清楚的可以先做功课 Vant Weapp小程序 UI 组件库 https://blog.csdn.net/qq_36303853/article/detail ...
小程序的上拉加载功能
小程序页面上拉加载步骤首先,在需要实现的页面js文件中,创建一个获取请求数据的方法: getdata(bool){let _this = thiswx.showLoading({title: '加载 ...
小程序解决上拉加载更多时数据超过1024KB
参考: 如果解决小程序1024kb渲染之坑小程序渲染数据超过 1024k 的解决办法新手不会用组件,只能自己再弄一个简单一点的解决,直接上代码. app.js // arr 数组,len 长度, ...
小程序 onReachBottom 上拉加载事件失效
微信自带的下拉刷新上拉加载需要在 .json 文件里打开 "enablePullDownRefresh": true 在 .js 文件中分别对应两个事件 /*** 页面相关事件处理 ...
uniapp小程序实现上拉加载更多
废话不多说直接上代码,对了这里的上拉组件使用的是uniapp自带的组件uni-load-more <template><view><view v-for="(i ...
小程序（上拉加载更多数据）
小程序部分首先设置三个用到的初始值:page数据当前页数.limit当前页面几条数据.hasMoreData上拉时是否继续请求数据,即是否还有更多数据,别的就可以参考下面的代码了小程序代码 // ...
listview上拉加载上一页下拉加载下一页共通处理
先什么都不说了,上效果图: 第一页默认显示: 上拉加载下一页: 拉至一定高度: 松开加载中: 下拉加载上一页: 下拉至一定高度: 松开加载中: 代码已经上传:http://download.csd ...

微信小程序如何上拉加载下一页

变量

上拉事件

请求

完整代码

微信小程序如何上拉加载下一页相关推荐

最新文章

热门文章