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 事件
相关推荐
jinzeming999几秒前
Vue3 PDF 预览组件设计与实现分析
前端
编程小Y2 分钟前
Vue 3 + Vite
前端·javascript·vue.js
GDAL11 分钟前
前端保存用户登录信息 深入全面讲解
前端·状态模式
大菜菜17 分钟前
Molecule Framework -EditorService API 详细文档
前端
Anita_Sun19 分钟前
😋 核心原理篇:线程池的 5 大核心组件
前端·node.js
Radan小哥20 分钟前
Docker学习笔记—day012
笔记·学习·docker
灼华_22 分钟前
Web前端移动端开发常见问题及解决方案(完整版)
前端
_请输入用户名23 分钟前
Vue3 Patch 全过程
前端·vue.js
孟祥_成都24 分钟前
nest.js / hono.js 一起学!字节团队如何配置多环境攻略!
前端·node.js
用户40993225021225 分钟前
Vue3数组语法如何高效处理动态类名的复杂组合与条件判断?
前端·ai编程·trae