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 事件
相关推荐
AI视觉网奇4 分钟前
ue 推送直播流 推流 linux 实战
笔记·学习·ue5
大时光10 分钟前
js 封装 动画效果
前端
大时光13 分钟前
html翻页时钟 效果
前端
kkkkkkkkk_120118 分钟前
【强化学习】09周博磊强化学习纲要学习笔记——第五课上
笔记·深度学习·学习·强化学习
大猫子的技术日记18 分钟前
2025 AI Agent 开发实战指南:从上下文工程到多智能体协作
前端·人工智能·bootstrap
玩c#的小杜同学20 分钟前
工业级稳定性:如何利用生产者-消费者模型(BlockingCollection)解决串口/网口高频丢包问题?
笔记·学习·性能优化·c#·软件工程
前端达人25 分钟前
被JavaScript忽视的Web Animations API:为什么说它是前端动画的真正未来?
开发语言·前端·javascript·ecmascript
laplace012328 分钟前
deque+yield+next语法
人工智能·笔记·python·agent·rag
忧郁的橙子.34 分钟前
04-从零搭建本地AI对话系统:Ollama + DeepSeek-R1:7B + Streamlit
前端·chrome
瑶光守护者38 分钟前
【学习笔记】3GPP NR-NTN 移动性IRAT分析
笔记·学习·卫星通信·nr-ntn