uniapp开发微信小程序笔记10-触底加载

前言:

触底加载需求描述:

经常在做一些商品列表页的时候,如果一次性加载大量数据会影响性能,一般都是先加载10-20条,等用户向下滑到底部时再加载新的数据并渲染上去。

1、官方提供了一个API:onReachBottom

来处理页面滚动到底部的事件,可以看到官方文档中把这个事件归在页面生命周期里,所以可以按照页面生命周期的方式写代码

javascript 复制代码
onReachBottom(){
    console.log('触底了!')
}

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

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

2、如果是用的scroll-view渲染

可以用scrolltolower来触发滚动到底部的事件

属性名 类型 说明
@scrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
@scrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件
相关推荐
东京老树根15 小时前
SAP学习笔记 - BTP SAP Build12 - SAP Build Content Package
笔记·学习
北京海得康15 小时前
阿那格雷临床疗效与起效时间【海得康】
笔记
Rhi63715 小时前
从零搭建项目:React 19 + Vite 8 + Tailwind CSS v4 实战配置
前端
竹林81815 小时前
用Viem替代ethers.js:从一次签名失败到完整迁移的实战记录
前端·javascript
之歆16 小时前
DAY08_CSS浮动与行内块布局实战指南(上)
前端·css
羊群智妍16 小时前
2026年AI搜索优化工具推荐:9款免费GEO监测工具实测
笔记
light blue bird16 小时前
主子端台二分法任务汇总组件
前端·数据库·.net·桌面端winform
智者知已应修善业16 小时前
【51单片机不用数组动态数码管显示字符和LED流水灯】2023-10-3
c++·经验分享·笔记·算法·51单片机
jeffwang17 小时前
我做了个让 AI 看屏幕跑测试的工具,因为 Playwright 测不了我的 Flutter Web
前端
HSunR17 小时前
dify 搭建ai作业批改流
开发语言·前端·javascript