小程序赖加载刷新数据页面数据堆叠问题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中赖加载完成的数据列表

<navigator style="height: 50rpx;" url="../Wenjain_shanchu/Wenjain_shanchu?Wenjain_shanchu_id={{item._id}}" slot="right">删除</navigator>

 列表.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 = thiswx.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

<van-dialog bind:confirm="Queding"bind:cancel="Quxiao" id="van-dialog" />

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77639.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

​LeetCode解法汇总2605. 从两个数字数组里生成最小数字

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; GitHub - September26/java-algorithms: 算法题汇总&#xff0c;包含牛客&#xff0c;leetCode&#xff0c;lintCode等网站题目的解法和代码&#xff0c;以及完整的mode类&#…

EasyPHP-Devserver-17安装和配置mantisBT

文章目录 1、准备工作2、安装easyphp2.1 http://127.0.0.1 无法访问 3、安装mantisBT和phpMyAdmin3.1 配置浏览器的访问url和端口号&#xff08;配置局域网内可访问&#xff09;3.2 安装mantis 4、Administrator 注册新用户时设置登录密码5、附件上传6、邮件配置 文章参考自&am…

【广州华锐互动】煤矿提升机作业VR互动实训平台

在煤矿行业中&#xff0c;安全性是无可忽视的首要任务。传统的煤矿工人培训方法&#xff0c;如理论课堂讲解、实地操作演示&#xff0c;尽管具有一定的效果&#xff0c;但往往无法真实地模拟出煤矿的复杂环境&#xff0c;工作人员在没有真正接触煤矿的情况下&#xff0c;很难理…

【LLM】Windows本地CPU部署民间版中文羊驼模型(Chinese-LLaMA-Alpaca)踩坑记录

目录 前言 准备工作 Git Python3.9 Cmake 下载模型 合并模型 部署模型 前言 想必有小伙伴也想跟我一样体验下部署大语言模型, 但碍于经济实力, 不过民间上出现了大量的量化模型, 我们平民也能体验体验啦~, 该模型可以在笔记本电脑上部署, 确保你电脑至少有16G运行…

【Face Swapping综述】Quick Overview of Face Swap Deep Fakes

【Face Swapping综述】Quick Overview of Face Swap Deep Fakes 0、前言Abstract1. Introduction2. Face Swapping Process2.1. Preprocessing2.2. Identity Extraction2.3. Attributes Extractor2.4. Generator2.5. Postprocessing2.6. Evaluation Methods3. Challenges4. Con…

【GO语言基础】变量常量

系列文章目录 【Go语言学习】ide安装与配置 【GO语言基础】前言 【GO语言基础】变量常量 【GO语言基础】数据类型 文章目录 系列文章目录常量和枚举变量声明全局变量声明大小写敏感 总结 常量和枚举 使用const关键字声明常量&#xff0c;并为每个常量提供显式的值。Go语言没有…

在Windows上通过SSH公私钥实现无密码登录Linux

在Windows上通过SSH公私钥实现无密码登录Linux 在Windows上生成SSH密钥对&#xff1a; 打开命令提示符或PowerShell窗口。 输入以下命令生成SSH密钥对&#xff1a; ssh-keygen -t rsa -b 4096按照提示输入密钥的保存路径和密码&#xff08;可选&#xff09;。 在指定的路径下…

嵌入式学习笔记(26)5S5PV210串行通信编程实战

5.5.1整个流程分析 整个串口通信相关程序包含2部分&#xff1a;uart_init负责初始化串口&#xff0c;uart_putc负责发送一个字节 5.5.2串口初始化关键步骤 &#xff08;1&#xff09;初始化串口的Tx和Rx引脚所对应的GPIO(查原理图可知Tx和Rx分别对应GPA0_1和GPA0_0) &#…

解决“您在 /var/spool/mail/root 中有新邮件”问题

一、发现问题 二、解决问题 1、删除邮件 cat /dev/null > /var/spool/mail/root 2、禁止系统启动邮件检查 echo "unset MAILCHECK" >> /etc/profile 三、解决结果

Matplotlib | 高阶绘图案例【3】- 五大战区高校排名

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. 数据处理2.1 高效数据2.2 学校排名 &#x1f3f3;️‍&#x1f308; 3. 绘图3.1 绘制图布&#xff0c;设置极坐标系3.2 绘制学校排名柱状图3.3 绘制五大战区扇形区域3.4 添加战区、学校…

关于安卓13中Android/data目录下的文件夹只能查看无法进行删改的问题

前言 因为升级了安卓13&#xff0c;然后有个app需要恢复数据&#xff0c;打算和以前一样直接删除Android/data下对应目录再添加&#xff0c;结果不行&#xff0c;以下是结合网上以及自己手机情况来做的一种解决方案。 解决 准备&#xff1a; 待恢复app&#xff08;包名com.…

Pytest系列- assert断言详细使用(4)

简介 在断言方面&#xff0c;pytest框架比其他类似的框架&#xff08;比如unittest&#xff09;更加简洁&#xff0c;易用&#xff0c;我想这是选择pytest作为自动化测试框架之一的原因之一。pytest的assert断言关键字支持使用python内置的assert表达式。可以理解为pytest的断…

正则匹配字符串中电话号码的中间几位为指定字符

今天遇到一个需求,要替换字符串中的电话号码的中间几位为星号, 泥马之前是后端做得,现在要我前端弄 , 心里一万个 艹 * 马............. 此处省略9997个字 . 直接上代码------- , 这里的字符做了连续判断,如果两个电话号码是连续的,就不做处理, 希望能帮到抓耳挠腮的你------ …

数据结构题型6-后插结点操作

#include <iostream> //引入头文件 using namespace std;typedef int Elemtype;#define Maxsize 100 #define ERROR 0 #define OK 1typedef struct LNode {Elemtype data;//数据域struct LNode* next;//指针域 }LNode, * LinkList;bool InitList(LinkList& L) …

Spring的组件扫描配置

<context:component-scan base-package"com.lyh.ssm.controller"><context:exclude-filter type"annotation" expression"org.springframework.stereotype.Controller"/></context:component-scan>这段配置是针对Spring的组件…

Container is running beyond memory limits

问题 Hadoop环境中&#xff0c;执行MapReduce程序或者Hive 任务时候&#xff0c;任务执行失败&#xff0c;提示内存不足。 Container is running 337869312B beyond the VIRTUAL’ memory limit.Current usage:295.8 NB of 1 GB physical memoryused;2.4 GB of 2.1 GB virtual…

PMP认证可以用来干什么呢?

PMP(项目管理专业人士&#xff09;认证是一项国际上广为认可的专业认证&#xff0c;具有以下几个重要用途和好处&#xff1a; 1. 提升职业竞争力&#xff1a; PMP认证是项目管理领域具有权威性和声誉的认证之一。持有PMP认证可以证明你具备了相关知识、技能和经验&#xff0c…

Layui + Flask | 表单元素(组件篇)(06)

表单元素是输入框、选择框、复选框、开关、单选框等表单项组件,用于对表单域进行输入。layui 的表单元素对原生的表单元素进行了大幅的用着,有好看的 UI 同时又有非常方便操作的 API。 输入框 https://layui.dev/docs/2.8/form/input.html 输入框组件是对文本框 <input ty…

spark withColumn的使用(笔记)

目录 前言&#xff1a; spark withColumn的语法及使用&#xff1a; 准备源数据演示&#xff1a; 完整实例代码&#xff1a; 前言&#xff1a; withColumn()&#xff1a;是Apache Spark中用于DataFrame操作的函数之一。它的作用是在DataFrame中添加或替换列&#xff0c;或者对…

【hive】列转行—collect_set()/collect_list()/concat_ws()函数的使用场景

文章目录 一、collect_set()/collect_list()二、实际运用把同一分组的不同行的数据聚合成一个行用下标可以随机取某一个聚合后的中的值用‘|’分隔开使用collect_set()/collect_list()使得全局有序 一、collect_set()/collect_list() 在 Hive 中想实现按某字段分组&#xff0c…