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

news/2024/7/20 4:14:09 标签: 微信小程序, 小程序, 微信

一、删除效果展示:

请添加图片描述

  // 重要代码片段
  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.niftyadmin.cn/n/62374.html

相关文章

使用ChatGPT和EZDML迅速高效生成可运行的软件系统原型

ChatGPT最近很热,其对程序员可以说影响极大,是不得不跟的潮流趋势,因此EZDML新版也把ChatGPT的支持加上了,可以在几分钟内按您的意思生成一个数据模型,再搭载使用EZDML自带的代码模板,能快速生成可真正运行…

package-lock.json,深度内容

前言 看完本文,你将从整体了解依赖版本锁定原理,package-lock.json 或 yarn.lock 的重要性。首先要从最近接连出现两起有关 npm 安装 package.json 中依赖包,由于依赖包版本更新 bug 造成项目出错问题说起。 事件一:新版本依赖包…

Linux(Linux各目录结构详解)

我们知道Linux系统是一个文件系统,它的文件系统就类似windows系统下的磁盘文件系统。 我们连接上一台linux系统的服务器。 输入命令 : ls / 我们可以看到 linux系统的根目录下有这些目录 bin boot data dev etc hbr home lib lib64 lostfoun…

DELL游匣ubuntu2004系统 RTX3060显卡,cuda11.4,cudnn8.2.4安装

1.安装Ubuntu2004的系统2.驱动安装前的准备工作第一步:修改设置下载源~阿里源。在Software Updater在第一栏Ubuntu Software页面中,找到Download from,选择->China->mirrors.aliyun.com,点击确认。第二步:sudo apt-get upda…

六、前端基础知识

1,JavaScript简介 JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译&…

00---C++入门

1. C关键字(C98) C总计63个关键字,C语言32个关键字 2. 命名空间 在C/C中,变量、函数和后面要学到的类都是大量存在的,这些变量、函数和类的名称将都存在于全局作用域中,可能会导致很多冲突。使用命名空间的目的是对标识符的名称进…

语音识别系列之脉冲神经网络特征工程

人工神经网络(Artificial Neural Network, ANN)中的单个人工神经元是对生物神经元的高度抽象、提炼和简化,模拟了后者的若干基本性质。得益于误差反向传播算法,网络权重可根据设定的目标函数得到有效地调整,ANN在视觉、…

【JavaScript】复习 【对象参数】【函数参数】

js不会检查任何参数类型,任何参数都可以作为参数传递 1、对象参数 改变量随便改,改对象要看这个对象是不是有多个变量同时指向这个对象 const 用来定义常量,只能赋值一次。 变量------->对象------->属性 被const修饰的对象 …