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 事件
相关推荐
Light604 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟4 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
web前端神器5 小时前
vue、uniapp项目循环中能显示每个列表的内容,但是点击的时候传递的参数却不正确
uni-app
ModyQyW5 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
bitbitDown5 小时前
我的2025年终总结
前端
五颜六色的黑5 小时前
vue3+elementPlus实现循环列表内容超出时展开收起功能
前端·javascript·vue.js
脾气有点小暴6 小时前
Uni-app App 端自定义导航栏完整实现指南
uni-app
wscats6 小时前
Markdown 编辑器技术调研
前端·人工智能·markdown
EnoYao6 小时前
Markdown 编辑器技术调研
前端·javascript·人工智能
JIngJaneIL7 小时前
基于java+ vue医院管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot