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 分钟前
为啥react要用jsx
前端·javascript·react.js
小黄编程快乐屋9 分钟前
前端小练习——大雪纷飞(JS没有上限!!!)
开发语言·前端·javascript
程序猿阿伟10 分钟前
《平衡之策:C++应对人工智能不平衡训练数据的数据增强方法》
前端·javascript·c++
STUPID MAN25 分钟前
vue3使用后端传递的文件流进行文件预览
前端·javascript·vue.js·文件预览
-代号952733 分钟前
【React】二、状态变量useState
前端·javascript·react.js
爬坑的小白34 分钟前
el-menu导航三级数据结构及数据展示
前端·javascript·vue.js
CodeSheep43 分钟前
雷军又添一员猛将!!
前端·后端·程序员
dz88i81 小时前
关于Chrome自动同步书签的解决办法
前端·chrome
大筒木老辈子2 小时前
Linux笔记---进程:进程替换
linux·服务器·笔记
温轻舟2 小时前
前端开发 之 15个页面加载特效中【附完整源码】
前端·javascript·css·html