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 事件
相关推荐
不会编程的懒洋洋16 分钟前
VisionPro 中 几何相交工具 Geometry-Intersection
图像处理·笔记·c#·视觉检测·机器视觉·visionpro
_李小白20 分钟前
【C++学习笔记】新特性之inline变量
c++·笔记·学习
心中有国也有家23 分钟前
hccl 架构拆解:昇腾集合通信库到底在做什么?
人工智能·经验分享·笔记·分布式·算法·架构
~黄夫人~30 分钟前
零基础速通|Windows&Linux 常用命令行对照表大全
linux·运维·windows·笔记·备忘录·整理表格
发现一只大呆瓜1 小时前
超全 Vite 性能优化指南:网络、资源、预渲染三维落地方案
前端·面试·vite
IT_陈寒2 小时前
Vue的computed属性怎么突然不更新了?
前端·人工智能·后端
智商不够_熬夜来凑2 小时前
【Picker】单选多选
前端·javascript·vue.js
奋斗的小乌龟2 小时前
动态创建Agent01
java·笔记
米饭不加菜3 小时前
Typora 原生流程图语法完全指南(Flowchart.js)
前端·javascript·流程图
scan7243 小时前
langgraphy条件边
前端·javascript·html