微信小程序scroll-view实现上拉加载数据重复的解决方法
微信小程序的 scroll-view 上拉加载更多的BUG(数据会多加载,甚至有重复数据)。
问题描述:上拉一次,会多次触发触底函数 onReachBottom();换成自定义加载更多函数, 例如 loadMore(), 问题依旧存在。
生产环境:调试基础库 目前最新版本1.9.94 依旧存在这个问题。
解决方法:加状态控制变量,限制 触底函数/加载更多函数 的触发条件。
页面上拉加载更多后,看下图,有重复数据
通用前端wxml代码 search.wxml
<!--pages/shop/search.wxml--> <scroll-view scroll-y="true" style="height:{{windowHeight}}px;" bindscrolltolower="onReachBottom"> <!-- 产品列表 --> <view class="flex-wrp"> <block wx:for="{{items}}"> <view bindtap="onItemClick" class="item-box" data-iid="{{item.id}}"> <image class="item-pic" src="{{item.thumb}}" mode="aspectFill"></image> <view class="item-info"> <view class='item-name'>{{item.name}}</view> <view class='price-sold-box'> <text class='current-price'>¥{{item.current_price}}</text> <text class='item-sold'><text class='sold-title'>销量</text> {{item.sold_num}}</text> </view> </view> </view> </block> </view> <view wx:if="{{pageEnd==true}}" class='scrollEnd'>已显示所有数据...</view> </scroll-view>
先看测试用例1 search.js(未修复BUG)
//pages/shop/public/search/search.js /* 有BUG的JS用例 */ const app = getApp(); var page = 0;//分页标签 Page({ data: { pageEnd:false, //是否页面底部 windowHeight: app.getWH(),//应用程序高度 // 商品列表数组 items:[], }, /************************* 系统及页面功能函数 **************************/ //页面加载 onLoad: function (options) { //第一次加载 this.getServerItems(page); }, // 触底函数(上拉加载更多) onReachBottom: function () { this.getServerItems(page); }, /************************* 网络请求 **************************/ /** * 获取服务器商品列表 * @param {string} page 分页 默认0 */ getServerItems: function (pg) { var tar = this; //设置默认值 pg = pg ? pg : 0; wx.showLoading({//显示toast title: '加载中...', }); //网络请求 wx.request({ url: "https://xxx.com/api/items/search", data: {page: pg}, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) {//网络请求成功 if (res.data.status == 1) {//有新数据 var tmpArr = res.data.data; arr = arr.concat(tmpArr); tar.setData({ items: arr, }); page++; } else {//res.data.status == 0 没有新数据了 tar.setData({ pageEnd:true,//显示页底信息 }) } }, error: function (e) {//网络请求失败 console.log(e); }, complete: function(c){//网络请求完成 wx.hideLoading();//隐藏toast } }) },
修复BUG,在上面 search.js 基础上加上 触底函数控制变量 canUseReachBottom 后的 search.js
//pages/shop/public/search/search.js /* 修复BUG后的JS用例 */ const app = getApp(); var page = 0; /* ------------------------- */ var canUseReachBottom = true;//触底函数控制变量 /* ------------------------- */ Page({ data: { pageEnd:false, windowHeight: app.getWH(), items:[], }, onLoad: function (options) { this.getServerItems(page); }, // 触底函数(上拉加载更多) onReachBottom: function () { /* ------------------------- */ if(!canUseReachBottom) return;//如果触底函数不可用,则不调用网络请求数据 /* ------------------------- */ this.getServerItems(page); }, ServerItems: function (pg) { /* ------------------------- */ canUseReachBottom = false;//触底函数关闭 /* ------------------------- */ var tar = this; pg = pg ? pg : 0; wx.showLoading({ title: '加载中...', }); wx.request({ url: "https://xxx.com/api/items/search", data: {page: pg}, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { if (res.data.status == 1) {//有新数据 var tmpArr = res.data.data; arr = arr.concat(tmpArr); tar.setData({ items: arr, }); page++; /* ------------------------- */ canUseReachBottom = true;//有新数据,触底函数开启,为下次触底调用做准备 /* ------------------------- */ } else { tar.setData({ pageEnd:true, }) } }, error: function (e) { console.log(e); }, complete: function(c){ wx.hideLoading(); } }) },
总结:导致BUG的原因可能是因为 触底函数触发后,请求网络数据->小程序渲染数据到前端,因为这两个过程会比较耗时,所以前端还没来得及渲染完成,触底函数判断前端页面还是在底部,再一次或者多次触发 触底函数。从而导致数据多次重复加载
通过看手机端小程序开发版的vConsole也可以看到。上拉一次,连续触发了3次网络请求request begin,然后服务器才延时逐一返回success结果。如图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
用js的document.write输出的广告无阻塞加载的方法
一、广告代码分析很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。复制代码 代码如下:<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5...2014-06-07- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 这篇文章主要介绍了解决IDEA插件市场Plugins无法加载的问题,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-21
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术,对性能优化感兴趣的同学,可以参考下...2021-05-11
- 本文介绍了如何延迟javascript代码的加载,加快网页的访问速度。 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点...2013-10-13
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 本篇文章主要介绍了ThinkPHP+jquery实现“加载更多”功能代码,以实例代码讲诉了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下 ...2017-03-13
- AngularJS 通过路由支持多视图应用, 可以根据路由动态加载所需的视图, 在 AngularJS 的文档中有详细的介绍, 网上也有不少教程, 就不用介绍了!随着视图的不断增加,js文件会越来越多,而 AngularJS 默认需要把全部的js都一次性...2015-10-21
解决vue动态路由异步加载import组件,加载不到module的问题
这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16