微信小程序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结果。如图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现跟随菜单效果和循环嵌套加载数据

    本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下 效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&

  • 微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)

    微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一) 页面缓存的设置优化了页面加载,减少了频繁的调取接口,使用户在断网的情况下有更好的体验. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localSt

  • 微信小程序中使用ECharts 异步加载数据的方法

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

  • 微信小程序页面滑动屏幕加载数据效果

    滑动屏幕加载数据是任何小程序中都会用到的功能,本文我就将这个功能整理给大家,希望对大家有意.我们先看看效果图: 创建目录 首先我们现在项目中创建资讯目录,以下是我自己创建的目录,大家可以根据自己的需求创建.如图所示: 创建lists.js文件 以下是lists.js代码 var app = getApp() Page({ data: { newsList: [], lastid: 0, toastHidden: true, confirmHidden: true, isfrist: 1, loa

  • 微信小程序如何加载数据库真实数据的实现

    微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100txy.com,具体申请步骤大家自行去申请吧,这里我就不做过多的介绍.下面我就以加载我博客素材最新的6条数据为案例来分析,下面是详细步骤. 一.进入小程序后台配置https服务器域名 二.程序中写好调用的数据,并返回json格式 //获取素材列表接口,该方法位于Application\Home\Cont

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序动态的加载数据实例代码

    微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1.首先要写在js里定义一个全局变量 data: { datalist: [] }, 2.请求数据加载,获得整个数组信息 wx.request({ url: httpUrl, data: {}, success: function (res) { that.setData({ datalist: res.data.courses }) },  3.在.wxml中调用 数组的调用用:wx:for="{{datalist}}"

  • 微信小程序scroll-view实现上拉加载数据重复的解决方法

    微信小程序的 scroll-view 上拉加载更多的BUG(数据会多加载,甚至有重复数据). 问题描述:上拉一次,会多次触发触底函数 onReachBottom():换成自定义加载更多函数, 例如 loadMore(), 问题依旧存在. 生产环境:调试基础库 目前最新版本1.9.94 依旧存在这个问题. 解决方法:加状态控制变量,限制 触底函数/加载更多函数 的触发条件. 页面上拉加载更多后,看下图,有重复数据 通用前端wxml代码 search.wxml <!--pages/shop/sear

  • 微信小程序实现瀑布流分页滚动加载

    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页

  • 微信小程序实现瀑布流布局与无限加载的方法详解

    前言 瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插件,轻松做出这样的布局形式.在微信小程序中,我们也可以做出这样的效果,不过由于小程序框架的一些特性,在实现思路上还是有一些差别的. 今天我们就来看一下如何在小程序中去实现这种瀑布流布局: 小程序瀑布流布局 我们要实现的是一个固定2列的布局,然后将图片数据动态加载进这两列中(而加载进来的图片,会

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • angularjs实现上拉加载和下拉刷新数据功能

    虽说AngularJS 1.x版本中对于上拉加载,下拉刷新数据功能都有做些封装,但还是有些人不清楚.其实我一开始也是不懂的,so.现在把搞懂的记录下免得少走弯路. now,begin:先说下拉刷新吧,原理就是每次下拉都重新去服务器请求过一次新的数据.一般这种刷新功能的响应数据(也就是服务器返回的(json)数据)中都会带有 "rowsOfPage": 3, "currentPage": 1, "totalPages": 10, "tot

  • 基于vue2实现上拉加载功能

    本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下 因为我们项目中,还用了swiper.很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个.代码如下(这个因为很多地方会用,所以建议放在components/common下面): <template> <div class="loadmore"> <slot></slot> <slot nam

  • 详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序(六):列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

随机推荐