小程序中data数据的处理方法总结(小程序交流群:604788754)
WXML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < view class="container"> < view wx:for="{{list}}" wx:key="this" style="padding: 10px 0;border-bottom: 1px solid #ddd;"> < view > {{index+1}}、{{item.name}} </ view > < view class="textright font12" style="color: #2A53CD;"> < text bindtap="remove" data-index="{{index}}" class="marlr10">删除</ text > < text bindtap="edit" data-index="{{index}}" >修改</ text > </ view > </ view > < button class="martop20" bindtap="add_before"> 向前插入数组 </ button > < button class="martop20" bindtap="add_after"> 向后插入数组 </ button > < button class="martop20" bindtap="clear"> 清空数组 </ button > </ view > |
WXSS:
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }
JS:
//index.js //获取应用实例 var app = getApp() Page({ data: { list:[{ id:1, name:'应季鲜果', count:1 },{ id:2, name:'精致糕点', count:6 },{ id:3, name:'全球美食烘培原料', count:12 },{ id:4, name:'无辣不欢生猛海鲜', count:5 }] }, //向前增加数据 add_before:function (){ //要增加的数组 var newarray = [{ id:6, name:'向前增加数据--'+new Date().getTime() , count:89 }]; this.data.list = newarray.concat(this.data.list); this.setData({ 'list': this.data.list }); }, //向后增加数据 add_after:function (){ //要增加的数组 var newarray = [{ id:5, name:'向后增加数据--'+new Date().getTime() , count:89 }]; this.setData({ 'list':this.data.list.concat(newarray) }); }, //删除 remove:function (e){ var dataset = e.target.dataset; var Index = dataset.index; //拿到是第几个数组 this.data.list.splice(Index,1); this.setData({ list:this.data.list }); }, //修改 edit:function (e){ var dataset = e.target.dataset; var Index = dataset.index; //拿到是第几个数组 this.data.list[Index].name = '修改了内容'+new Date().getTime(); this.setData({ list:this.data.list }); }, //清空 clear:function (){ this.setData({ list:[] }); } })
效果图如下:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
· 提示词工程——AI应用必不可少的技术