♩. 背景
- 个人的项目中,在进行用户地址的删除操作时,我需要动态隐藏已经删除掉的地址
- 毕竟小程序的
JS
跟我们前端接触的JavaScript
代码有很大的不同
♪. 思路设计
- 我的想法是:
1.首先获取用户所有未删除的地址(根据字段
status
进行判断),规定:0:普通地址,1:默认地址,2:已删除地址
2. 当进行删除操作成功后,遍历地址数组列表,找到对应操作成功的地址ID,然后动态js更改其status
状态值(其实此处的状态值只是一个标识,也可以使用 "hide"或"show"来进行区分显示即可)
3. 在WXML
,选择使用 条件渲染 的方式,只显示没有被删除的view
视图
♫. 代码说明
①. 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: '', })
,但是开发工具上就看看到明显的跳转效果,太难看
- 此处推荐文章 【微信小程序】小程序动态显示和隐藏某个控件,个人觉得有点麻烦,可作参考