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 事件
相关推荐
星光不问赶路人2 分钟前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼5 分钟前
shadcn/ui,给你一个真正可控的UI组件库
前端
r i c k5 分钟前
数据库系统学习笔记
数据库·笔记·学习
布列瑟农的星空9 分钟前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_14 分钟前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus20 分钟前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空24 分钟前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰29 分钟前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
会一丢丢蝶泳的咻狗1 小时前
Sass实现,蛇形流动布局
前端·css
攀登的牵牛花1 小时前
前端向架构突围系列 - 状态数据设计 [8 - 4]:有限状态机 (FSM) 在复杂前端逻辑中的应用
前端