#Uniapp: onReachBottom页面触底的事件回调

onReachBottom页面触底的事件回调

定义

页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance

js 复制代码
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "信息",
				"enablePullDownRefresh": true,
				"onReachBottomDistance": 200, // 页面触底的距离
				"navigationBarBackgroundColor": "#00ff00",
				"h5": { // h5页面特定样式
					"titleNView": {
						"backgroundColor": "#ffff00"
					}
				}
			}
		}]

比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动,则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档。

事件

js 复制代码
onReachBottom() {
			console.log('xiaoo')
		}
相关推荐
脾气有点小暴4 小时前
scroll-view分页加载
前端·javascript·uni-app
脾气有点小暴7 小时前
uniapp自定义头部导航
前端·uni-app
前端 贾公子12 小时前
[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
uni-app
雪芽蓝域zzs15 小时前
uniapp基于picker选择器实现年月日时分秒
uni-app
niucloud-admin16 小时前
本地开发部署——uniapp端站点部署
uni-app
毕设源码-郭学长2 天前
【开题答辩全过程】以 基于uni-app的维修上门服务小程序设计与实现为例,包含答辩的问题和答案
uni-app
xiaohe06012 天前
📦 Uni ECharts 是如何使用定制 echarts 的?一篇文章轻松掌握!
vue.js·uni-app·echarts
Front思2 天前
uniapp实现物流节点
uni-app
赵庆明老师2 天前
uniapp 微信小程序页面JS模板
javascript·微信小程序·uni-app
熬耶2 天前
uniapp 简单实现列表左滑操作
uni-app