微信小程序删除list指定列表项

news2024/12/24 9:40:26

一、删除效果展示:

请添加图片描述

  // 重要代码片段
  async deleteListItem(e) {
    const sureResult = await wx.showModal({
      title: "提示",
      content: "确定要删除这项吗",
    });
    if (sureResult.confirm) {
      const { index } = e.currentTarget.dataset;
      setTimeout(()=>{
        this.setData({
        	// 只对数组的指定项进行操作,不要重新更新整个数组,配合wx:if来删除数组中的一项
            [`listData[${index}].show`]: false,   
          })
      },300)
    }
  },

在这里插入图片描述

微信代码片段链接: https://developers.weixin.qq.com/s/0jO4sZmc7xFc

二、删除时增加动画,模拟删除的网络请求,从详情页删除的效果展示

请添加图片描述

微信代码片段链接:https://developers.weixin.qq.com/s/MOPalZmW7uFC


最后,想说的是,搜了 微信小程序list列表删除功能微信小程序-实现删除指定列表项 这两个问题的时候
搜出来的结果有如下链接:
https://blog.csdn.net/weixin_47144141/article/details/127880575
https://blog.csdn.net/m0_49223543/article/details/125683218
https://www.jianshu.com/p/033487c09df8
这些文章都是说用数组的splice方法删除掉操作项的那一个对象,然后再重新setData一遍整个数组,这样的方法我认为可不太好,如果数组里有几百项了,删除的是第两百项,那么setData一下子传输了大量的数据到渲染层,导致渲染效率非常糟糕。这是我读小程序开发文档读到的。

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/runtime_setData.html【小程序合理使用 setData的官方文档地址】

3.4 setData 应只传发生变化的数据
setData 的数据量会影响数据拷贝和数据通讯的耗时,增加页面更新的开销,造成页面更新延迟。
✅ setData 应只传入发生变化的字段;
✅ 建议以数据路径形式改变数组中的某一项或对象的某个属性,如 this.setData({‘array[2].message’: ‘newVal’, ‘a.b.c.d’: ‘newVal’}),而不是每次都更新整个对象或数组;
❌ 不要在 setData 中偷懒一次性传所有data:this.setData(this.data)。

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

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

相关文章

Centos7安装kvm WEB管理工具kimchi

参考:虚拟化技术之kvm WEB管理工具kimchi一、kimchi安装1.1 下载wok安装包和kimchi安装包# 1. wok下载地址: wget https://github.com/kimchi-project/kimchi/releases/download/2.5.0/wok-2.5.0-0.el7.centos.noarch.rpm # 2. kimchi下载地址&#xff1…

Springmvc补充配置

Controller配置总结 控制器通常通过接口定义或注解定义两种方法实现 在用接口定义写控制器时&#xff0c;需要去Spring配置文件中注册请求的bean;name对应请求路径&#xff0c;class对应处理请求的类。 <bean id"/hello" class"com.demo.Controller.HelloCo…

【Spark分布式内存计算框架——Spark SQL】2. SparkSQL 概述(上)

第二章 SparkSQL 概述 Spark SQL允许开发人员直接处理RDD&#xff0c;同时可以查询在Hive上存储的外部数据。Spark SQL的一个重要特点就是能够统一处理关系表和RDD&#xff0c;使得开发人员可以轻松的使用SQL命令进行外部查询&#xff0c;同时进行更加复杂的数据分析。 2.1 前…

蓝桥杯模块学习16——PCF8591(深夜学习——单片机)

一、硬件电路&#xff1a;1、蓝桥杯板子上的电路&#xff1a;&#xff08;1&#xff09;AIN0-3&#xff1a;四种模拟量的输入口&#xff0c;AIN1为光敏电阻控制电压输入&#xff0c;AIN3为电位器控制电压输入&#xff08;2&#xff09;A0-2&#xff1a;决定设备的地址码&#x…

SSTI漏洞原理及渗透测试

模板引擎&#xff08;Web开发中&#xff09; 是为了使 用户界面 和 业务数据&#xff08;内容&#xff09;分离而产生的&#xff0c;它可以生成特定格式的文档&#xff0c; 利用模板引擎来生成前端的HTML代码&#xff0c;模板引擎会提供一套生成HTML代码的程序&#xff0c;之后…

TensorRT的Python接口解析

TensorRT的Python接口解析 文章目录TensorRT的Python接口解析4.1. The Build Phase4.1.1. Creating a Network Definition in Python4.1.2. Importing a Model using the ONNX Parser4.1.3. Building an Engine4.2. Deserializing a Plan4.3. Performing Inference点此链接加入…

科技巨头争相入局,卫星通信领域将迎来怎样的发展?

近年来&#xff0c;全球卫星通信产业进入了一个高速发展的阶段。与卫星通信相关的新技术和新应用不断出现&#xff0c;成为了媒体报道的热点&#xff0c;也引起了公众的广泛关注。尤其是刚刚过去的2022年&#xff0c;华为和苹果公司分别发布了搭载卫星通信技术的手机&#xff0…

万丈高楼平地起:Linux常用命令

目录 系统管理命令 man命令 ls命令 cd命令 useradd命令 passwd命令 free命令 whoami命令 ps命令 date命令 pwd命令 shutdown命令 文件目录管理命令 touch命令 cat命令 mkdir命令 rm命令 cp命令 mv命令 find命令 more指令 less指令 head指令 tail指令 …

基于HTML实现浪漫情人节表白代码(附源代码)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【spark】第三章——SparkSQL

文章目录1. SparkSQL 概述1.1 SparkSQL 是什么1.2 Hive and SparkSQL1.3 SparkSQL 特点1.3.1 易整合1.3.2 统一的数据访问1.3.3 兼容 Hive1.3.4 标准数据连接1.4 DataFrame 是什么1.5 DataSet 是什么2. SparkSQL 核心编程2.1 新的起点2.2 DataFrame2.2.1 创建 DataFrame2.2.2 S…

MVC架构 —— 理解 Dao 层和 Service 层

MVC 框架念叨了千百遍&#xff0c;但是对于它的理解还是停留在概念上。 作为一种经典架构设计典范&#xff0c;MVC 在日新月异的软件行业却能常青数十年&#xff0c;一定有其独特的魅力。 一、Dao 层和 Service 层的概念 Dao 是 Data Access Object &#xff08;数据访问对象&…

FPGA纯verilog实现任意分辨率视频输出显示,高度贴近真实项目,提供工程源码和技术支持

目录1、前言2、视频显示的VESA协议3、VESA协议的bug4、FPGA实现任意分辨率视频输出显示5、FDMA实现数据缓存6、vivado工程详解7、上板调试验证并演示8、福利&#xff1a;工程代码的获取1、前言 本设计使用纯Verilog代码实现&#xff0c;重点在于基于AXI协议的DDR控制器的运用&…

SpringBoot 整合EasyExcel详解

一、概述 Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题&#xff0c;但POI还是有一些缺陷&#xff0c;比如07版Excel解压缩以及解压后存储都是在内…

内网渗透-src挖掘-互联网打点到内网渗透-2023年2月

1、通过信息搜集&#xff0c;发现目标有一个互联网访问的骑士cms 2、发现该系统骑士cms版本为6.0.20&#xff0c;通过搜索&#xff0c;发现骑士cms < 6.0.48存在任意文件包含漏洞 /Application/Common/Controller/BaseController.class.php 该文件的assign_resume_tpl函数…

字节面试惨败,闭关修炼再战美团(Android 面经~)

作者&#xff1a;王旭 前言 本人从事Android 开发已经有5年了&#xff0c;受末日寒气影响&#xff0c;被迫在家休整&#xff0c;事后第一家选择字节跳动面试&#xff0c;无奈的被面试官虐得“体无完肤”&#xff0c;好在自己并未气馁&#xff0c;于是回家开始回家进行闭关修炼…

使用红黑树模拟实现map和set

在STL的源代码中&#xff0c;map和set的底层原理都是红黑树。但这颗红黑树跟我们单独写的红黑树不一样&#xff0c;它需要改造一下&#xff1a; 改造红黑树 节点的定义 因为map和set的底层都是红黑树。而且map是拥有键值对pair<K,V>的&#xff0c;而set是没有键值对&a…

教育行业需要什么样的数字产品?

数字化转型的浪潮已经席卷了各行各业&#xff0c;不仅出现在互联网、电商、建筑等行业&#xff0c;还应用在了教育行业。数字化的教育ERP软件能够在满足学校需求的基础上&#xff0c;帮助学校完善各类工作流程&#xff0c;提高工作效率。 对于一个拥有多个校区&#xff0c;上万…

ChatGPT 也太火了吧 ...

最近 ChatGPT 太火了&#xff0c;微信指数 ChatGPT 关键词飙升。GitHub 上也不例外&#xff0c;最近热门项目都是 ChatGPT 项目。后续会陆续更新 ChatGPT 好玩的开源项目&#xff0c;本期是本周登上热榜的 Repo&#xff0c;请查收。本期推荐开源项目目录&#xff1a;1. 对 Chat…

ms17-010(永恒之蓝漏洞复现)

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;HW-2023-漏洞复现 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff…

Inception-Resnet-v1、Inception-Resnet-v2学习笔记

Inception-Resnet-v1、Inception-Resnet-v2来自2016年谷歌发表的这篇论文&#xff1a;Inception-v4 Inception-ResNet and the Impact of Residual Connections on Learning&#xff0c;附论文链接&#xff1a; [1602.07261] Inception-v4, Inception-ResNet and the Impact o…