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

实现流程如下:

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

具体代码如下:

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

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

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

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

最后在父组件触底时调用

相关推荐
web前端神器10 小时前
vue、uniapp项目循环中能显示每个列表的内容,但是点击的时候传递的参数却不正确
uni-app
ModyQyW11 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
脾气有点小暴11 小时前
Uni-app App 端自定义导航栏完整实现指南
uni-app
CDwenhuohuo17 小时前
uniapp去掉手机状态栏 全屏展示
开发语言·javascript·uni-app
行走的陀螺仪20 小时前
使用uniapp,实现根据时间倒计时执行进度条变化
前端·javascript·uni-app·vue2·h5
Hzsilvana21 小时前
踩坑日记:Uniapp项目定位偏差与依赖更新的真相
uni-app
丸子哥哥1 天前
vue + uni-app:利用原生uni.chooseImage封装拍照功能的组件
微信小程序·uni-app·vue
雪芽蓝域zzs1 天前
uniapp 判断运行设备类型(安卓、苹果、鸿蒙、微信小程序、H5)
android·uni-app·harmonyos
梦6501 天前
UniApp 全面介绍与快速上手
uni-app
壹号机长1 天前
uniapp+vue3 接入deepseek Ai
ai·小程序·uni-app