;

微信小程序上拉加载方案

2023-10-24 阅读:512
;
您当前位置:首页 | 新闻列表 | 新闻详情

微信小程序上拉加载

160fa2069ece26699e28935343d3798.png

微信小程序提供onReachBottom上拉事件

developers.weixin.qq.com/miniprogram…

思路

当前页和总页数进行对比,判断是否要进行加载。

	
	
kotlin
复制代码
data: { list:null, //列表 pageIndex:1, //请求页码 pageSize:10, //每页多少条 totalpage:0, //总页数 },
	
	
kotlin
复制代码
onShow() { this.getReceivedListPage() }, // 页面上拉触底事件的处理函数 onReachBottom(){ if (this.data.pageIndex <= this.data.totalpage) { this.getReceivedListPage() } },
	
	
kotlin
复制代码
getReceivedListPage() { let page = this.data.pageIndex; let params = { pageIndex: this.data.pageIndex, pageSize: this.data.pageSize, }; getReceivedListPage(params).then(res => { page++; const resData = res.data.data; const purification = resData.list.map((a, i) => { return { last: page - 1 == resData.pages && i == resData.list.length - 1 ? true : false, // 是否是最后一条数据 ...a } }) this.setData({ totalpage: resData.totalPage, [`list[${this.data.pageIndex-1}]`]: purification, pageIndex: page }); }); },

[list[${this.data.pageIndex-1}]] : purification 这种写法是为避免setData数据量过大,list数据在使用时需注意多循环一层 ~



上一篇:微信小程序跳转腾讯会议小程序 下一篇:微信小程序支付流程,轻松实现支付功能

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

在线预约

  • 您的姓名
  • 联系电话

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 小程序定制 生鲜小程序 全平台开发 网站建设 外包开发 自主研发产品 sitemap robots

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部