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 事件
相关推荐
会飞的不留神2 分钟前
【图形学笔记】概率密度函数的通俗理解和应用
笔记
悠哉悠哉愿意4 分钟前
【强化学习学习笔记】马尔科夫决策过程
笔记·学习·交互·强化学习
myFirstName19 分钟前
离谱!React中不起眼的[]和{}居然也会导致性能问题
前端
我是伪码农25 分钟前
Vue 2.11
前端·javascript·vue.js
Amumu1213825 分钟前
CSS:字体属性
前端·css
凯里欧文42729 分钟前
html与CSS伪类技巧
前端
山岚的运维笔记30 分钟前
SQL Server笔记 -- 第52章 拆分字符串函数
数据库·笔记·sql·mysql·microsoft·sqlserver
UIUV31 分钟前
构建Git AI提交助手:从零到全栈实现的学习笔记
前端·后端·typescript
wuhen_n32 分钟前
JavaScript 防抖与节流进阶:从原理到实战
前端·javascript
百慕大三角34 分钟前
AI Agent开发之向量检索:一篇讲清「稀疏 + 稠密 + Hybrid Search」怎么落地
前端·agent·ai编程