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 事件
相关推荐
IT枫斗者几秒前
MyBatis批量插入性能优化:从5分钟到3秒的工程化实践
前端·vue.js·mysql·mongodb·性能优化·mybatis
前端 贾公子18 分钟前
深入理解 Vue3 的 v-model 及自定义指令的实现原理(中)
前端·html
tq108621 分钟前
JAF 规范 v0.1
笔记
pop_xiaoli23 分钟前
effective-Objective-C 第四章阅读笔记
笔记·ios·objective-c·cocoa·xcode
毕设源码-郭学长29 分钟前
【开题答辩全过程】以 基于微信小程序的当当手办店铺为例,包含答辩的问题和答案
微信小程序·小程序
qq_242188633233 分钟前
微信小程序新年首页源码
微信小程序·小程序
四谎真好看36 分钟前
SSM学习笔记(SpringMVC篇 Day01)
笔记·学习·学习笔记·ssm
Never_Satisfied40 分钟前
在HTML & CSS中,img标签固定宽度时,img和图片保持比例缩放
前端·css·html
Cache技术分享1 小时前
327. Java Stream API - 实现 joining() 收集器:从简单到进阶
前端·后端
嵌入式×边缘AI:打怪升级日志1 小时前
ARM Cortex-M 单片机启动流程与向量表深度解析(保姆级复习笔记)
arm开发·笔记·单片机