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 事件
相关推荐
有一个好名字6 分钟前
claude code安装
linux·运维·前端
BIBABULALA17 分钟前
Mini Virtual Machine — 可视化虚拟机模拟器(91行)
前端·css·css3
筱璦24 分钟前
期货软件开发「启动加载页 / 初始化窗口」
前端·c#·策略模式·期货
风酥糖24 分钟前
在Termux中运行Siyuan笔记服务
android·linux·服务器·笔记
跃龙客28 分钟前
C++写文件笔记
c++·笔记
只与明月听31 分钟前
RAG深入学习之Emabedding
前端·python·面试
We་ct34 分钟前
React Scheduler & Lane 详解
前端·react.js·前端框架·reactjs·个人开发·任务调度·优先
宵时待雨41 分钟前
C++笔记归纳11:多态
开发语言·c++·笔记
kgduu1 小时前
js之json处理
前端·javascript·json
@木尘1 小时前
前端面试【 八股文篇】
前端·面试·职场和发展