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 事件
相关推荐
来杯三花豆奶几秒前
Vue 3.0 Mixins 详解:从基础到迁移的全面指南
前端·javascript·vue.js
想学后端的前端工程师5 分钟前
【React性能优化实战指南:从入门到精通-web技术栈】
前端·react.js·性能优化
im_AMBER15 分钟前
数据结构 13 图 | 哈希表 | 树
数据结构·笔记·学习·算法·散列表
白兰地空瓶27 分钟前
React Hooks 深度理解:useState / useEffect 如何管理副作用与内存
前端·react.js
会思考的猴子28 分钟前
UE5 笔记敌人自动追踪
笔记·ue5
wdfk_prog29 分钟前
[Linux]学习笔记系列 -- [fs][drop_caches]
linux·笔记·学习
cike_y40 分钟前
JSP内置对象及作用域&双亲委派机制
java·前端·网络安全·jsp·安全开发
2021_fc42 分钟前
Flink笔记
大数据·笔记·flink
巴拉巴拉~~1 小时前
KMP 算法通用进度条组件:KmpProgressWidget 多维度 + 匹配进度联动 + 平滑动画
java·服务器·前端
UVM_ERROR2 小时前
RDMA Scheduler + TX + Completion RTL 开发经验分享
笔记·vscode·ssh·github·芯片