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 事件
相关推荐
落霞的思绪29 分钟前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q30 分钟前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz38 分钟前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
丝斯20111 小时前
AI学习笔记整理(67)——大模型的Benchmark(基准测试)
人工智能·笔记·学习
whale fall1 小时前
2026 年 1-3 月雅思口语完整话题清单(1-4 月通用最终版)
笔记·学习
Exquisite.1 小时前
Nginx
服务器·前端·nginx
xian_wwq1 小时前
【学习笔记】对网络安全“三化六防挂图作战”的理解与思考
笔记·学习·三化六防
打小就很皮...1 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov2 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发
三伏5222 小时前
Cortex-M3权威指南Cn第十章——笔记
笔记·单片机·嵌入式硬件·cortex-m3