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 事件
相关推荐
凯里欧文42714 小时前
极简版前端版本检测方案
前端·webpack
Desirediscipline14 小时前
#include<limits>#include <string>#include <sstream>#include <iomanip>
java·开发语言·前端·javascript·算法
青青家的小灰灰14 小时前
深入解析 React 中的 useCallback:原理、场景与最佳实践
前端·react.js
摇滚侠14 小时前
RocketMQ 教程丨深度掌握 MQ 消息中间件,笔记 39-44
笔记·rocketmq
HelloReader14 小时前
Nuxt 4.2 + Tauri 2 接入指南把 Vue 元框架“静态化”后装进桌面/移动端
前端
SuperEugene14 小时前
手把手写几种常用工具函数:深拷贝、去重、扁平化
前端·javascript·面试
大时光14 小时前
疯狂点赞效果
前端
月下雨(Moonlit Rain)14 小时前
数据库笔记
数据库·笔记
今儿敲了吗14 小时前
27| 魔法封印
数据结构·c++·笔记·学习·算法
桂花很香,旭很美14 小时前
Anthropic Agent 工程实战笔记(四)长任务与多 Agent
笔记·架构·agent