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 事件
相关推荐
Jinuss几秒前
源码分析之React中的useId
前端·javascript·react.js
牧码岛几秒前
Web前端之样式中的prefers-color-scheme,一套完整的主题系统设计与原理解析
前端·css·web·web前端
后海大草鱼几秒前
PTE考试谁说RS必须全对?Repeat Sentence提分从0到会就看这篇
前端·后端
前端缘梦3 分钟前
Next.js 实现AI流式输出(打字机效果)
前端·面试·全栈
oscar9993 分钟前
给 Claude Code 装上浏览器:Chrome 集成测试版详解
前端·chrome·集成测试·浏览器
美团内卖5 分钟前
雪碧图还在手写 background-position?试试这款 Vite + Vue3 构建期雪碧图插件
前端
大萝卜呼呼5 分钟前
Next.js第三课 - 布局与页面 - 优栈
前端·next.js
码云数智-园园6 分钟前
Java接口与抽象类:从设计哲学到应用场景的深度辨析
前端
莱昂晨7 分钟前
Vue 3偶发字体乱码 - 原因探究
前端·javascript·vue.js
AlkaidSTART7 分钟前
0 基础入门 Zustand:新手友好的 React 状态管理方案
前端·javascript