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

这篇具有很好参考价值的文章主要介绍了微信小程序删除list指定列表项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、删除效果展示:

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

  // 重要代码片段
  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)
    }
  },

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

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

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

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

微信代码片段链接: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)。文章来源地址https://www.toymoban.com/news/detail-486578.html

到了这里,关于微信小程序删除list指定列表项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 《新闻列表》 案例

    今天带着练习一个小程序的基础练习 《新闻列表》 内容如图: 如要求: 1.主页头部的轮播图 2.中间内容上的信息案列排版。 3.上拉加载内容。 4.在信息加载完成后,给用户提示 我们看一下这个关于轮播图的相关文档。 文档地址:https://developers.weixin.qq.com/miniprogram/dev/compon

    2024年02月08日
    浏览(43)
  • 微信小程序电影列表(一)

    } .more{ float: right; } .more-text{ vertical-align: middle; margin-right: 10rpx; color: #1f4ba5; } .more-img{ width: 9rpx; height: 16rpx; vertical-align: middle; } .movies-container{ display: flex; flex-direction: row; } 编写电影界面整体样式 movies.wxss @import “movie-list/movie-list-template.wxss”; 从服务器获取数据 我们将使用豆瓣

    2024年02月09日
    浏览(47)
  • 微信小程序 如何实现列表

    微信小程序中实现列表可以通过使用「scroll-view」组件或「list」组件来实现。 使用「scroll-view」组件:可以使用 wx:for 指令来循环渲染列表中的数据,并为每个元素设置相应的样式。 使用「list」组件:该组件已经内置了列表的常用功能,包括列表渲染、上拉加载、下拉刷新等

    2024年02月11日
    浏览(44)
  • 小程序 | 微信小程序实现商品分类列表

    小程序 | 微信小程序实现商品分类列表 一、效果展示 二、代码实现

    2024年02月11日
    浏览(49)
  • 微信小程序本地生活(列表页面)

    一、实现效果 二、实现步骤 主要实现功能: 页面导航并传参 上拉触底时加载下一页数据 下拉刷新列表数据 实现步骤 创建列表页面 动态设置页面标题 定义数据,发起请求获取数据 渲染数据并美化样式 实现上拉加载数据效果 对上拉触底进行节流处理 上拉触底请求数据前,

    2024年02月09日
    浏览(68)
  • 微信小程序编写新闻阅读列表

    swiper image{ width:100%; height:500rpx; } App.json 里的关于导航栏、标题的配置 官方API文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html 主要属性 简单案例 post.json { “navigationBarBackgroundColor”: “#405f80”, “navigationBarTitleText”: “文与字” } 构建文章列表 案例代码 pos

    2024年04月14日
    浏览(42)
  • 微信小程序 - 商城项目 - 列表排序

    需要实现两个排序功能,价格排序和好评排序,且都可以 正反切换 价格排序中,价格为 数字类型 ,属于数字的比较, 无需转换类型 点击价格排序的图标后,切换阀门值 sort((a,b)=b.price-a.price) 或 sort((a,b)=a.price-b.price) 正反排序的切换 好评排序中,好评为 字符串类型 , 需要

    2024年02月08日
    浏览(61)
  • 【微信小程序】 微信小程序报错不在以下request合法域名列表中

    小程序开发的时候,在用微信开发者工具做网络请求的时候,调试会出错,提示“不在以下 request 合法域名列表中,请参考文档” https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html 1.打开微信公众平台 2.点击 开发设置 3.滚动到最底部 在 服务器域名 下设置,输入

    2024年02月11日
    浏览(68)
  • uniapp 微信小程序 城市索引列表

    最近做的一个项目需要频繁用到城市列表切换,切换城市,腾讯地图虽然有地图列表,但是效果不是自己项目想要的,于是就结合结合uview的IndexList 索引列表重新做了一个城市列表的页面 效果图:  页面结构:address.vue script代码: QQMapWX:腾讯地图sdk cityCode:城市列表处理的数

    2024年02月07日
    浏览(40)
  • 实现原生微信小程序虚拟列表

    小程序的setData每一次调用,都会重新和旧的虚拟dom进行diff对比,如果页面列表比较大的话,不断频繁加载setData,实际上是非常消耗性能的,所以也是为了解决这个考虑,我虽然每一次都在使用setData加载数据,但是setData加载完成的数据,我并不是直接渲染,而是通过wxml中微

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包