uniapp最简单的上拉加载更多demo
2024-09-05 21:29:12
data() {
return {
list:[],//数据列表
page: 1,//页数
}
},
//请求一下数据(进入页面请求一次)
onLoad() {
this.getnewsList(this.page)
},
// 监听触底
onReachBottom() {
this.getnewsList(this.page);
},
methods: {
//屏幕到底部时候触发此事件
//以下是演示，具体是要看接口再操作
getnewsList(page) {
uni.request({
//两种写法，看接口所需
//1.如果接口后面数据不是页数的话就这样写
url:'接口',
data:{page},
//2.如果接口后面数据是页数的话就这样写
url:'接口'+page,
success:(res) => {
//如果返回没有数据了,数组长度为0
if (res.data.length==0) {
//没有数据就替换一下loadingText的值
uni.showToast({
title: '没有更多数据了',
icon: 'none',
mask: false
})
return;
}else{
this.page+=1; //每触底一次 page +1
this.list= this.list.concat(res.data); //将数据拼接在一起
}
}
});
}
},
遇到的问题, 有些人 遇到tab高度不确定, 点击tab栏 触发触底! 解决方案如下:
data() {
return {
isReachBottom:true,//是否开启触底函数
}
}
methods: {
//屏幕到底部时候触发此事件
//以下是演示，具体是要看接口再操作
getnewsList(page) {
uni.request({
//两种写法，看接口所需
//1.如果接口后面数据不是页数的话就这样写
url:'接口',
data:{page},
//2.如果接口后面数据是页数的话就这样写
url:'接口'+page,
success:(res) => {
this.isReachBottom = true //接口请求到数据, 放开触底
//如果返回没有数据了,数组长度为0
if (res.data.length==0) {
uni.showToast({
title: '没有更多数据了',
icon: 'none',
mask: false
})
return;
}else{
this.page+=1; //每触底一次 page +1
this.list= this.list.concat(res.data); //将数据拼接在一起
}
}
});
}
},
// 监听触底
onReachBottom() {
if(!this.isReachBottom) return;
this.getnewsList(this.page);
},
还有, tab切换的时候:
tabClick() {
this.isReachBottom = false; tab栏切换,关闭触底
this.page = 1
this.list = []
this.getnewsList(1)
},
最新文章
- 查看Windows下引起Oracle CPU占用率高的神器-qslice
- javascript 面向对象（转）
- eclipse静态部署tomcat
- SQL Server 2008管理工具出现 远程过程调用失败0x800706be解决方法
- mtu
- wap版和pc版的旋转js
- Mac OS 终端常用命令【搜藏】
- 简述同步IO、异步IO、阻塞IO、非阻塞IO之间的联系与区别
- 东软实习<3>
- Python游戏编程入门4
- Eclipse控制台输出log日志中文乱码
- Java语法基础学习DayFourteen（IO）
- head命令用法总结
- 多线程操作的方法（sleep,）setPriority(Thread.MIN_PRIORITY);yield();
- python 关键字yield解析
- topcoder srm 325 div1
- 阿里巴巴Java开发规范---个人总结
- Android 获取全局Context的技巧
- Python_oldboy_自动化运维之路（八）
- Climbing Stairs 爬楼梯问题，每次可以走1或2步，爬上n层楼梯总方法 （变相fibonacci）