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 事件
相关推荐
Coder-coco4 分钟前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·spring boot·微信小程序·论文·个人健康系统
用户214118326360225 分钟前
Google Nano Banana Pro图像生成王者归来
前端
文心快码BaiduComate37 分钟前
下周感恩节!文心快码助力感恩节抽奖页快速开发
前端·后端·程序员
_小九38 分钟前
【开源】耗时数月、我开发了一款功能全面的AI图床
前端·后端·图片资源
('-')39 分钟前
《从根上理解MySQL是怎样运行的》第二张学习笔记
笔记·学习·mysql
恋猫de小郭1 小时前
聊一聊 Gemini3、 AntiGravity 和 Nano Banana Pro 的体验和问题
前端·aigc·gemini
d111111111d1 小时前
STM32外设学习-I2C通信(代码)--MPU6050--笔记
笔记·stm32·单片机·嵌入式硬件·学习
一 乐1 小时前
英语学习激励|基于java+vue的英语学习交流平台系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·学习·小程序
淡淡蓝蓝1 小时前
uni.uploadFile使用PUT方法上传图片
开发语言·前端·javascript
老华带你飞1 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·微信小程序·论文·毕设·个人健康系统