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 事件
相关推荐
whbi2 分钟前
DataX Web 部署方案
前端
im_AMBER2 分钟前
Leetcode 70 好数对的数目 | 与对应负数同时存在的最大正整数
数据结构·笔记·学习·算法·leetcode
闹小艾4 分钟前
制作知识付费线上课程小程序:制作平台实操指南,不用编程3分钟学会搭建
小程序
BD_Marathon6 分钟前
【JavaWeb】CSS_三种引入方式
前端·css
excel6 分钟前
# Vue 渲染系统的四个关键阶段:从模板编译到新旧 VDOM Patch 的完整机制解析
前端
cos7 分钟前
我的 Claude Code 使用小记 2
前端·ai编程·claude
Dreamboat-L10 分钟前
ES6 (ECMAScript 2015+)
前端·ecmascript·es6
凤凰战士芭比Q1 小时前
web中间件——(二)Nginx(高级功能、优化)
前端·nginx·中间件
阿珊和她的猫1 小时前
表单数据验证:HTML5 自带属性与其他方法的结合应用
前端·状态模式·html5
hd51cc2 小时前
MFC消息 学习笔记
笔记·学习·mfc