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 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er7 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0610 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444013 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆13 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子17 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain924 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人34 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger36 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
aklry1 小时前
uniapp三步完成生成一维码图片
uni-app