我的编程空间,编程开发者的网络收藏夹
学习永远不晚

小程序赖加载刷新数据页面数据堆叠问题debug

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

小程序赖加载刷新数据页面数据堆叠问题debug

 

目录

项目所需

原生写赖加载存在的bug

解决问题思路及代码实现

思路:

代码实现:

列表.wxml

 列表.js

Wenjain_shanchu.js

Wenjain_shanchu.json

Wenjain_shanchu.wxml

shouye.js

 ⭐️ 好书推荐

【内容简介】 


项目所需

某高校大一新生入学,学校的综合服务站小程序上传文件的列表支撑前端页面支撑不了成千上万条的渲染。

所以,决定将直接列表加载换成赖加载。

原生写赖加载存在的bug

使用原生来创建一个赖加载是不错的选择,但是遇到了一个问题,就是小程序的onshow和onload生命周期钩子,无论使用哪一个钩子都会存在数据刷新之后数据堆叠的问题。

解决问题思路及代码实现

思路:

我们使用懒加载时,一般会套用者数据的增删改查一起使用,比如:使用赖加载列数据之后,想实现每一条数据的删除之后刷新数据,这个时候就不能够使用正常的onshow或者onload生命钩子实现。

我们这时候要使用列表页面点击删除时跳到二级页面实现删除数据的同时,在二级页面使用getCurrentPages()函数获取到小程序页面栈,然后通过pages.length来获取上一个页面的实力对象,在通过beforePage方法修改上一个页面的数据,并结合着beforePage方法调用上一个页面的自定义方法,在使用正常的wx.navigateBack返回上一个父级页面并携带一个自定义的参数,这时候需要在父级页面上创建对话框事件,实现返回到此父级页面的上一个页面,然后再从此父级页面的上一个页面的onload生命钩子函数中做判断,如果孙页面的参数存在且判断正确,则自动执行跳到列表页面,从而解决赖加载结合数据的增删改查之后的数据在列表页面的堆叠问题!

代码实现:

列表.wxml

赖加载时候的数据删除

这里的item里面的_id是js中赖加载完成的数据列表

删除

 列表.js

  onShow() {    if (this.data.txt == 1) {      wx.showModal({        title: '删除成功!',        content: '是否自动重新进入此页面完成刷新!',        success(res) {          if (res.confirm) {            console.log('用户点击确定')            wx.reLaunch({              url: '../shouye/shouye?wenjian='+'yonghu',            })          } else if (res.cancel) {            console.log('用户点击取消')          }        }      })    }  },

Wenjain_shanchu.js

  Queding(){    let that = this    wx.cloud.database().collection('wenjian').doc(that.options.Wenjain_shanchu_id).remove({        success(res){            console.log(res)            wx.showToast({              title: '删除成功!',            })            let pages = getCurrentPages();   //获取小程序页面栈            let beforePage = pages[pages.length -2];  //获取上个页面的实例对象            beforePage.setData({      //直接修改上个页面的数据(可通过这种方式直接传递参数)              txt:1            })            beforePage.go_update();   //触发上个页面自定义的go_update方法            wx.navigateBack({         //返回上一页                delta:1            })        }    })  },  onLoad(options) {    console.log(options.Wenjain_shanchu_id)    Dialog.confirm({      title: "再次确定您是否要删除",      message:'\n\n',      customStyle:'width:500rpx;border-radius: 20rpx;padding:20px;display: flex;flex-direction: column;font-size:20px',      // theme:'round-button',     }).then(() => {      // on close     });      },

Wenjain_shanchu.json

{  "usingComponents": {    "van-dialog": "@vant/weapp/dialog/index"  }}

Wenjain_shanchu.wxml

shouye.js

  onLoad(options) {    console.log(options,'111')    if(options.wenjian == 'yonghu'){      wx.navigateTo({        url: '../My_wenjain/My_wenjain',      })    }  },

 ⭐️ 好书推荐

清华社【秋日阅读企划】领券立享优惠

IT好书 5折叠加10元 无门槛优惠券:https://u.jd.com/Yqsd9wj

活动时间:9月4日-9月17日,先到先得,快快来抢

【内容简介】 

 《Vue.js从入门到精通》从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用Vue.js进行程序开发需要掌握的各方面技术。全书分为4篇,共19章,内容包括初识Vue.js、ECMAScript 6语法介绍、Vue实例与数据绑定、条件判断指令、v-for指令、计算属性和监听属性、元素样式绑定、事件处理、表单元素绑定、自定义指令、组件、组合API、过渡和动画效果、渲染函数、使用Vue Router实现路由、使用axios实现Ajax请求、Vue CLI、状态管理,以及51购商城项目实战。书中的大多数知识点都结合具体实例进行介绍,涉及的程序代码给出了详细的注释,使读者可轻松领会Vue.js程序开发的精髓,快速提高开发技能。

📚 京东购买链接:https://item.jd.com/14055952.html

来源地址:https://blog.csdn.net/lbcyllqj/article/details/132847382

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

小程序赖加载刷新数据页面数据堆叠问题debug

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

这篇文章主要介绍了微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递,拨打电话,需要的朋友可以参考下
2022-12-10

编程热搜

  • Android:VolumeShaper
    VolumeShaper(支持版本改一下,minsdkversion:26,android8.0(api26)进一步学习对声音的编辑,可以让音频的声音有变化的播放 VolumeShaper.Configuration的三个参数 durati
    Android:VolumeShaper
  • Android崩溃异常捕获方法
    开发中最让人头疼的是应用突然爆炸,然后跳回到桌面。而且我们常常不知道这种状况会何时出现,在应用调试阶段还好,还可以通过调试工具的日志查看错误出现在哪里。但平时使用的时候给你闹崩溃,那你就欲哭无泪了。 那么今天主要讲一下如何去捕捉系统出现的U
    Android崩溃异常捕获方法
  • android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
    系统的设置–>电池–>使用情况中,统计的能耗的使用情况也是以power_profile.xml的value作为基础参数的1、我的手机中power_profile.xml的内容: HTC t328w代码如下:
    android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
  • Android SQLite数据库基本操作方法
    程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能却很强的一个数据库–SQLite数据库。那么就来看一下在Android程序中怎么去操作SQLite数
    Android SQLite数据库基本操作方法
  • ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
    工作的时候为了方便直接打开编辑文件,一些常用的软件或者文件我们会放在桌面,但是在ubuntu20.04下直接直接拖拽文件到桌面根本没有效果,在进入桌面后发现软件列表中的软件只能收藏到面板,无法复制到桌面使用,不知道为什么会这样,似乎并不是很
    ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
  • android获取当前手机号示例程序
    代码如下: public String getLocalNumber() { TelephonyManager tManager =
    android获取当前手机号示例程序
  • Android音视频开发(三)TextureView
    简介 TextureView与SurfaceView类似,可用于显示视频或OpenGL场景。 与SurfaceView的区别 SurfaceView不能使用变换和缩放等操作,不能叠加(Overlay)两个SurfaceView。 Textu
    Android音视频开发(三)TextureView
  • android获取屏幕高度和宽度的实现方法
    本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下: 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即
    android获取屏幕高度和宽度的实现方法
  • Android自定义popupwindow实例代码
    先来看看效果图:一、布局
  • Android第一次实验
    一、实验原理 1.1实验目标 编程实现用户名与密码的存储与调用。 1.2实验要求 设计用户登录界面、登录成功界面、用户注册界面,用户注册时,将其用户名、密码保存到SharedPreference中,登录时输入用户名、密码,读取SharedP
    Android第一次实验

目录