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 事件
相关推荐
兆子龙5 分钟前
你不会使用 CSS 函数 clamp()?那你太 low 了😀
前端·javascript
兆子龙6 分钟前
前端性能优化终极清单:从 3 秒到 0.5 秒的实战经验
前端·javascript
兆子龙8 分钟前
babel-loader:让你的 JS 代码兼容所有浏览器
前端
百万蹄蹄向前冲9 分钟前
支付宝 VS 微信 小程序差异
前端·后端·微信小程序
兆子龙13 分钟前
JavaScript 的 Symbol.iterator:手写一个可迭代对象
前端
NGC_661113 分钟前
ArrayList扩容机制
java·前端·算法
做cv的小昊2 小时前
大语言模型系统:【CMU 11-868】课程学习笔记02——GPU编程基础1(GPU Programming Basics 1)
人工智能·笔记·学习·语言模型·llm·transformer·agent
独泪了无痕6 小时前
使用Fetch API 探索前后端数据交互
前端·http·交互设计
css趣多多6 小时前
别名路径的知识点
前端