微信小程序中使用setData({})达到删除、编辑操作后页面数据局部刷新的效果

前言:
当一个页面数据列表过多时,刷新数据如果采用全局加载(整页数据重新渲染)方式则影响用户的体验,这时候需要优化成局部加载(部分修改数据重新渲染)。

场景:最近用户提出小程序的列表数据翻页后数据刷新不能回到之前修改的位置,简单讲:就是用户想进行修改、删除操作后,当前页面不需要重新数据渲染,,

在这里插入图片描述

如图:列表数据是拥有删除和编辑功能(点击分类名称,出现分类选则弹框)

1.删除操作
*通过html页面获取删除数据的下标后,等js中调取删除api成功之后,使用数组splice方法删除该下标的元素,最后使用 this.setData({}) 将之前数组重新赋值,以此做到页面的局部数据刷新。

在这里插入图片描述

2.编辑操作
思路:获取需要修改对象原有的值和修改后新的值后,在修改api调取成功后,遍历集合判断如果是同一个对象,则将新的值覆盖旧的值,最后通过this.setData({})将数组数据再次更新即可。
在这里插入图片描述

以上主要是实现思路,因为本列表页面数据为二维数组渲染,随机变化即可!

微信小程序中,当你需要实现实时更新购物车数据删除后立即刷新页面,通常会涉及以下几个步骤: 1. **事件监听**:在删除商品的操作组件中,添加一个`onRemoveItem`或类似事件的处理函数,当用户确认删除操作时,触发这个事件。 ```javascript // 删除按钮的bindtap事件 bindtap="deleteItem" ``` 2. **事件触发**:在`deleteItem`函数中,从服务器或本地存储(如`wx.setStorageSync`)中删除相应的商品,并发送请求到服务端以持久化更改。 ```javascript deleteItem(item) { // 从购物车列表中移除item this.cartList = this.cartList.filter(i => i.id !== item.id); // 从本地存储中移除 wx.removeStorageSync('cart', item); // 发送删除请求到服务器 axios.delete('/api/cart/' + item.id) .then(() => { // 页面数据更新成功后,可以考虑调用接口获取最新的购物车列表刷新页面 this.getCartItems(); // 获取最新的购物车数据 this.setData({ cartList: this.cartList }); // 更新页面显示 }) .catch(err => console.error('删除失败:', err)); } ``` 3. **数据同步**:如果购物车数据是通过网络接口获取的,可以在`getCartItems`方法里实现自动刷新,通常会有一个轮询机制或者使用WebSocket保持长连接。 4. **局部刷新**:考虑到性能优化,你还可以选择只刷新展示购物车内容的部分,而不是整个页面。比如,在WXML模板中,你可以设置一个`wx:if`条件判断购物车是否为空。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值