wechat-miniprogram-examples之滚动加载：scroll-view实现上拉加载更多与下拉刷新的5个技巧

wechat-miniprogram-examples之滚动加载scroll-view实现上拉加载更多与下拉刷新的5个技巧【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples在微信小程序开发中scroll-view 上拉加载更多与下拉刷新几乎是每个列表页的标配功能。很多新手在实现时总会遇到滚动不触发重复请求刷新失效等经典问题。而开源项目wechat-miniprogram-examples微信小程序示例中的豆瓣图书、知乎日报两个案例恰好给出了两套风格迥异但都非常经典的滚动加载实现方案非常适合新手对照学习。本文基于该项目源码为你拆解 scroll-view 实现上拉加载更多与下拉刷新的 5 个实用技巧。先认识项目两个现成的滚动加载示例wechat-miniprogram-examples 一共包含三个小程序示例豆瓣图书、知乎日报、事项助手。其中滚动加载相关的核心代码集中在两个目录豆瓣图书上拉加载更多DouBanBookApp/pages/index/知乎日报下拉刷新 加载更多ZhiHuDaily/pages/index/想亲自运行调试可以克隆仓库后分别用微信开发者工具打开对应目录git clone https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples小提示项目内每个小程序都没有配置 appid运行前需要在开发者工具中为项目分配一个 appid否则真机预览可能受限。技巧1给 scroll-view 一个固定高度让 bindscrolltolower 真正触发 ⚙️上拉加载更多的原理是监听滚动到底部的事件但很多新手发现bindscrolltolower怎么都不触发原因往往是scroll-view 没有固定高度。scroll-view 只有在自身可滚动内容超过可视高度时滚动到底事件才会生效。豆瓣图书示例的做法非常清晰在DouBanBookApp/pages/index/index.wxml中scroll-view scroll-ytrue styleheight:{{scrollHeight}}px bindscrolltolowerscrollLowerEvent高度scrollHeight不是写死的而是在页面onShow时通过wx.getSystemInfo动态获取屏幕高度计算得出见技巧5。触底后由scrollLowerEvent负责加载下一页数据核心判断只有一行!this.data.loadingMore requestData.call(this);技巧2用 loadingMore 标志位防抖避免上拉加载重复请求 ️快速滑动列表时bindscrolltolower可能被连续触发多次如果每次都发请求不仅浪费流量还会造成数据错乱。解决方案就是加载中标志位 短路判断。在DouBanBookApp/pages/index/index.js中数据里维护了一个loadingMore字段请求发起前setData({ loadingMore: true })请求成功/失败后setData({ loadingMore: false })触发事件时!this.data.loadingMore requestData.call(this)这个防抖模式虽然简单却是滚动加载中最重要的一道保险强烈建议每个列表页都加上。技巧3分页参数与数据拼接pageIndex concat 的正确姿势 上拉加载的核心是追加数据而不是覆盖数据。豆瓣图书示例用两个字段管理分页pageIndex当前页码作为请求的start参数传给接口pageData已加载的图书数组每次请求成功后用concat把新数据追加到旧数据后面再递增页码pageData: this.data.pageData.concat(data.books), pageIndex: start 1,知乎日报的加载更多则走时间线思路用日期向前翻页Api.getBeforeNews(dateStr)同样用concat拼接每日新闻。两种分页策略虽不同但追加式数据管理的思路完全一致。技巧4页面级下拉刷新enablePullDownRefresh onPullDownRefresh 滚动加载的另一半是下拉刷新。知乎日报采用的是页面级方案只需两步第一步在页面配置文件ZhiHuDaily/pages/index/index.json中开启开关{ enablePullDownRefresh: true }第二步在ZhiHuDaily/pages/index/index.js中监听下拉事件重新拉取最新数据onPullDownRefresh() { this.onReady(); },由于onReady里已经封装了完整的请求今日热文 轮播图逻辑下拉刷新直接复用它即可代码非常简洁。扩展知识如果你用的是 scroll-view 内部滚动而非整页滚动也可以使用它自带的refresher-enabled属性 bindrefresherrefresh事件实现组件级下拉刷新两种方式按页面结构取舍。技巧5动态计算 scroll-view 高度适配不同机型 scroll-view 需要固定高度但不同手机屏幕高度差异很大写死高度必然出问题。豆瓣图书示例用wx.getSystemInfo动态计算堪称教科书写法wx.getSystemInfo({ success: (res) { this.setData({ scrollHeight: res.windowHeight - (100 * res.windowWidth / 750) }); } })代码中100是顶部搜索框的 rpx 高度通过rpx转px公式rpx值 × 屏幕宽度 / 750换算成像素后从窗口高度中减去剩余部分正好是列表的滚动区域。这也是项目里唯一需要适配计算的技巧学会了它你的列表页在任何机型上都能完美贴合屏幕。常见坑位清单滚动加载避雷指南 问题现象根本原因解决方向bindscrolltolower 不触发scroll-view 无固定高度或内容不满一屏动态计算高度保证内容可滚动快速滑动导致数据重复触底事件连续触发loadingMore 标志位防抖下拉刷新没反应未开启 enablePullDownRefresh页面 json 中开启开关列表数据被覆盖直接赋值而非追加使用 concat 拼接分页数据真机预览异常未配置 appid为项目分配 appid小结跟着示例项目一次学会滚动加载 ✅回顾 wechat-miniprogram-examples 教给我们的 5 个技巧固定 scroll-view 高度、loadingMore 防抖、pageIndex 分页管理、页面级下拉刷新、动态计算高度适配机型。这些模式不仅适用于本项目更是所有微信小程序列表页的通用套路。想深入研读源码推荐重点阅读这两个文件DouBanBookApp/pages/index/index.js—— 上拉加载更多 防抖 分页的完整实现ZhiHuDaily/pages/index/index.js与index.json—— 下拉刷新 按日期加载更多的实现对照源码亲手跑一遍相信你很快就能在自己的小程序中写出丝滑的滚动加载体验【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考