uni-app实现分页--(1)准备工作,首页下拉触底加载更多

实现流程如下:

分析:需要在滚动容器中添加滚动触底,在猜你喜欢中获取数据。难点:如何在父页面调用子组件内的方法。父组件中用ref,并定义组件实例类型,子组件中暴露方法

具体代码如下:

1.在父组件中添加scrolltolower事件,用于调用子组件方法获取数据

2.给子组件添加ref属性,并给定义组件实例类型

考虑到组件实例会在多处用到,直接早types的component.d.ts中定义

3.在子组件中利用defineExpose将方法暴露出去

最后在父组件触底时调用

相关推荐
2501_9160074712 小时前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview
巴博尔1 天前
UNIAPP中NVUE页面 动画
android·前端·javascript·ios·uni-app
边界条件╝2 天前
uniapp 深度使用
uni-app
路光.2 天前
uniapp小程序/App使用webview打通麦克风权限实现录音功能
小程序·uni-app·app
xiaoyan20152 天前
全新首发uniapp+deepseek-v4三端通用智能ai助手
uni-app·ai编程·deepseek
anyup2 天前
【最全鸿蒙】uni-app 转鸿蒙:从打包失败到商店上架成功全过程
前端·uni-app·harmonyos
2501_915106322 天前
深入解析HTTPS抓包原理、中间人攻击及反抓包技术攻防
数据库·网络协议·ios·小程序·https·uni-app·iphone
游戏开发爱好者82 天前
React Grab工具详解:AI助力Vue3、Svelte和Solid前端元素调试
android·ios·小程序·https·uni-app·iphone·webview
sN2vuQ08W2 天前
uni-app 实现视频聊天、屏幕分享,支持Android、HarmonyOS、iOS
android·uni-app·音视频
遗憾随她而去.2 天前
uniapp App平台 真机运行
uni-app