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 事件
相关推荐
亭上秋和景清几秒前
指针进阶: 回调函数
开发语言·前端·javascript
前端小臻2 分钟前
react中的函数组件和类组件(快捷指令和区别)
前端·react.js·前端框架
计算机毕设指导63 分钟前
基于微信小程序的宠物走失信息管理系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·宠物
烤麻辣烫3 分钟前
黑马大事件学习-15(前端登录页面)
前端·css·vue.js·学习·html
Hacker_Z&Q4 分钟前
HTML5笔记3 (表格、表单、H5新标签)
笔记
2501_916008894 分钟前
iOS 能耗检测的工程化方法,构建多工具协同的电量分析与性能能效体系
android·ios·小程序·https·uni-app·iphone·webview
数据门徒8 分钟前
《人工智能现代方法(第4版)》 第11章 自动规划 学习笔记
人工智能·笔记·学习
Cache技术分享12 分钟前
266. Java 集合 - ArrayList vs LinkedList 内存使用深度剖析
前端·后端
说私域17 分钟前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的线上向线下导流运营研究
人工智能·小程序·开源