前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序 动态修改二维数组 示例

小程序 动态修改二维数组 示例

作者头像
泥豆芽儿 MT
发布2018-09-11 11:38:56
1.9K0
发布2018-09-11 11:38:56
举报
文章被收录于专栏:木头编程 - moTzxx

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333855

♩. 背景

  • 个人的项目中,在进行用户地址的删除操作时,我需要动态隐藏已经删除掉的地址
  • 毕竟小程序的 JS 跟我们前端接触的 JavaScript 代码有很大的不同

♪. 思路设计

  • 我的想法是:

1.首先获取用户所有未删除的地址(根据字段 status 进行判断),规定:0:普通地址,1:默认地址,2:已删除地址 2. 当进行删除操作成功后,遍历地址数组列表,找到对应操作成功的地址ID,然后动态js更改其status状态值(其实此处的状态值只是一个标识,也可以使用 “hide”或”show”来进行区分显示即可) 3. 在 WXML,选择使用 条件渲染 的方式,只显示没有被删除的 view视图undefined

♫. 代码说明

①. JS 文件中的代码处理

  • 核心在于处理数组的遍历和重新赋值操作,参考核心代码如下:
代码语言:javascript
复制
             //进行数组的拷贝处理
              var newAddr = that.data.userAddr;
              for(var i=0;i<newAddr.length;i++){
                var addr_id = newAddr[i]['address_id'];
                if (address_id == addr_id){
                  newAddr[i]['status'] = 2;
                }
              }
              //进行数据的替换
             that.setData({
               userAddr:newAddr
             })
  • 参考截图:

②. WXML 页面中的主要处理

  • 其实,主要的就是一个渲染条件

♬. 附录:

  • 个人的小看法: 其实,一开始我没解决时,想到的是直接本页面跳转 即为使用 wx.redirectTo({url: '', }),但是开发工具上就看看到明显的跳转效果,太难看
  • 此处推荐文章 【微信小程序】小程序动态显示和隐藏某个控件,个人觉得有点麻烦,可作参考
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年06月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ♩. 背景
  • ♪. 思路设计
  • ♫. 代码说明
    • ①. JS 文件中的代码处理
      • ②. WXML 页面中的主要处理
      • ♬. 附录:
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档