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 事件
相关推荐
time_rg几秒前
深入理解react——1. jsx与虚拟dom
前端·react.js
Keke2 分钟前
🍔 fabric如何实现辅助选区捏
前端·javascript
hang_bro3 分钟前
echarts 饼图显示设置
前端·echarts
2501_941886864 分钟前
基于法兰克福金融系统实践的高可靠消息队列设计与多语言实现经验总结分享
服务器·前端·数据库
用户12039112947265 分钟前
React 性能优化之道:useMemo、useCallback 与闭包陷阱的深度剖析
前端·javascript·react.js
weixin_433179338 分钟前
《旋元佑进阶文法》之 句型
笔记·英语语法
niconicoC9 分钟前
Three.js 高性能天气效果实现:下雨与下雪的 GPU 粒子系统
前端
Reece_11 分钟前
微信小程序接入微信支付全流程指南(CloudBase / JSAPI / 真机可用)
微信·微信小程序·小程序
阿珊和她的猫12 分钟前
从 AMD 到 ES6 模块化:前端模块化的演进之路
前端·ecmascript·es6
codexu12 分钟前
Tauri iOS 开发中 "pnpm: command not found" 错误解决方案
前端