#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')
		}
相关推荐
嘉琪00113 小时前
uni-app 核心坑点及解决方案——2026 0309
uni-app
行者-全栈开发16 小时前
uni-app 审批流程组件封装:打造企业级工作流可视化方案
uni-app
2501_9160088917 小时前
iPhone 上怎么抓 App 的网络请求,在 iOS 设备上捕获网络请求
android·网络·ios·小程序·uni-app·iphone·webview
jingling55518 小时前
无需重新安装APK | uni-app 热更新技术实战
前端·javascript·前端框架·uni-app·node.js
遇见小美好y18 小时前
uniapp 实现向下追加数据功能
前端·javascript·uni-app
行者-全栈开发18 小时前
43 篇系统实战:uni-app 从入门到架构师成长之路
前端·typescript·uni-app·vue3·最佳实践·企业级架构
00后程序员张20 小时前
iOS上架工具,AppUploader(开心上架)用于证书生成、描述文件管理Xcode用于应用构建
android·macos·ios·小程序·uni-app·iphone·xcode
万物得其道者成20 小时前
uniapp 滑动过快 onReachBottom 事件不触发
uni-app
2501_9159214320 小时前
只有 IPA 没有源码时,如何给 iOS 应用做安全处理
android·安全·ios·小程序·uni-app·iphone·webview