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

版权声明：本文为博主原创文章，未经博主允许不得转载。 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 文件中的代码处理

• 核心在于处理数组的遍历和重新赋值操作，参考核心代码如下：

             //进行数组的拷贝处理
              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: '', })，但是开发工具上就看看到明显的跳转效果，太难看
• 此处推荐文章 【微信小程序】小程序动态显示和隐藏某个控件，个人觉得有点麻烦，可作参考