#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')
		}
相关推荐
多客:duokelijie4 小时前
代练订单系统选型思路:跨品类游戏接入、订单分层管理、自动结算逻辑拆解!
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白11 小时前
鸿蒙端对接 BLE 血压计:从一次握手到读数入库(二)设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
华玥作者1 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang1 天前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008892 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW2 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468592 天前
uniapp vue3 小程序开发注意事项
uni-app
雪芽蓝域zzs2 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
普通人63 天前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
PedroQue994 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app