手机版
网站地图
美文美图
最新动态
你好,欢迎访问
好美文阅读网
个性皮肤
搜索
网站首页
美文
文章
散文
日记
诗歌
小说
故事
句子
作文
签名
祝福语
情书
范文
读后感
文学百科
美文摘抄
节日文章
名家散文
网名大全
座右铭
口号大全
面试技巧
说说大全
阅读答案
诗词默写
流言蜚语
节日祝福
好句子
经典台词
谚语大全
亲情故事
友情故事
表白情书
工作报告
活动总结
心得体会
专题汇总
美文网首页
小程序瀑布流分页(下拉底部自动分页)
小程序瀑布流分页(下拉底部自动分页)
作者:
扶得一人醉如苏沐晨
| 来源:发表于
2022-09-03 15:11 被阅读0次
首先在json文件里面配置开启下拉到底部触发
"enablePullDownRefresh": true,
"enableReachBottom": true,
配置页面数据
showList: [], //页面展示数据
pagesize: 3, //每页展示的条数
current: 1, //当前页数
total: 1, //总页数
// 这个是后台请求的分页数据
let list = res.data.data.records
var arr1 = this.data.showList; //页面此时展示的l列表(数组)
var arr2 = list; //后端返回的列表(数组)
arr1 = arr1.concat(arr2); //合并两个数组
console.log("arr1", arr1);
that.setData({
showList: arr1, //合并后更新list
total: res.data.data.total, //后台返回的列表的总页数
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if (!(this.data.showList && this.data.showList.length > 0)) return
// 获取当前页面展示的总条数
let currentTotal = this.data.showList.length
if (currentTotal < this.data.total) { //这里是为了当前条数小于总条数,否则会一直刷新
var current = this.data.current * 1 + 1 //上滑一次就加载下一页 在当前页数加一 就是加载下一页
this.setData({
current: current //更新data中的页数
})
// 重新获取list
this.getList(this.data.tabsStatus); //再次调用(获取下一页的数据)
} else {
wx.showToast({
title: '暂无更多数据', //如果当前页数大于总页数则不会刷新并显示提示
icon: "none"
})
}
},
如果有tab切换,需要在切换的时候,把current当前也赋值为1,且showList也要赋值为空
相关文章
网友评论
本文标题:
小程序瀑布流分页(下拉底部自动分页)
本文链接:
https://www.haomeiwen.com/subject/pevunrtx.html
延伸阅读
那年盛夏诗歌
环境监察队工作总结范文
优秀教师学习心得范文
华胥引的读后感300字
《Its red》教学反思范文
农资购销的合同范本
竞选中队委优秀演讲稿
辞金蹈海的成语解释
《世纪宝鼎》公开课教案设计
因为爱你,所以牵挂
今生今世红尘醉——美到
一个90后的内心独白
致已逝去的高中年华
深度阅读
您也可以注册成为美文阅读网的作者,发表您的原创作品、分享您的心情!
情人节
母亲节
重阳节
清明节
端午节
植树节
元宵节
妇女节
愚人节
圣诞节
父亲节
教师节
儿童节
劳动节
青年节
建军节
万圣节
平安夜
光棍节
中秋节
国庆节
感恩节
腊八节
更多话题
栏目导航
摄影
故事
互联网
读书
旅行
热点阅读
冷笑话之顾虑
刘傅氏民宅门口风俗文化趣谈
简书会员应援计划发声||小白入简书会员小窍门
感性与理性的较量
书法家张志刚——“练中国书法,承传统文化”迎中秋作品展
自发刮痧
日记
秋拥大剧院
好睡眠胜过十全大补丸
流水账的一天
网友评论