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 事件
相关推荐
C澒3 小时前
微前端容器标准化:容器标准化能力的 “配置化+ 插件化”
前端·架构
南境十里·墨染春水8 小时前
C++传记(面向对象)虚析构函数 纯虚函数 抽象类 final、override关键字
开发语言·c++·笔记·算法
anOnion8 小时前
构建无障碍组件之Carousel Pattern
前端·html·交互设计
ssshooter9 小时前
Tauri 2 iOS 开发避坑指南:文件保存、Dialog 和 Documents 目录的那些坑
前端·后端·ios
Можно9 小时前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
Birdy_x10 小时前
接口自动化项目实战(1):requests请求封装
开发语言·前端·python
中屹指纹浏览器10 小时前
2026基于内核隔离的浏览器环境虚拟化技术在企业数字化运营中的应用研究
经验分享·笔记
天天向上102411 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
一轮弯弯的明月11 小时前
Python基础-速通秘籍(下)
开发语言·笔记·python·学习
柳杉12 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化