• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序中data数据的处理方法总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

wxml代码:

 1 <view class="container">
 2 <view wx:for="{{list}}" wx:key="this" style="padding: 10px 0;border-bottom: 1px solid #ddd;">
 3     <view>
 4         {{index+1}}、{{item.name}}
 5     </view>
 6     <view class="textright font12" style="color: #2A53CD;">
 7          <text bindtap="remove" data-index="{{index}}" class="marlr10">删除</text>   
 8          <text bindtap="edit" data-index="{{index}}" >修改</text>
 9     </view>
10 </view>
11 <button class="martop20" bindtap="add_before">
12     向前插入数组
13 </button>
14 <button class="martop20" bindtap="add_after">
15     向后插入数组
16 </button>
17 <button class="martop20" bindtap="clear">
18     清空数组
19 </button>
20 </view>

js代码:

 1 //index.js
 2 //获取应用实例
 3 var app = getApp()
 4 Page({
 5   data: {
 6         list:[{
 7                 id:1,
 8                 name:\'应季鲜果\',
 9                 count:1
10         },{
11                 id:2,
12                 name:\'精致糕点\',
13                 count:6
14         },{
15                 id:3,
16                 name:\'全球美食烘培原料\',
17                 count:12
18         },{
19                 id:4,
20                 name:\'无辣不欢生猛海鲜\',
21                 count:5
22         }]
23   },
24   //向前增加数据
25   add_before:function (){
26       //要增加的数组
27       var newarray = [{
28               id:6,
29               name:\'向前增加数据--\'+new Date().getTime() ,
30               count:89
31       }];
32         this.data.list = newarray.concat(this.data.list);
33       this.setData({
34           \'list\':    this.data.list
35       });
36   },
37   //向后增加数据
38   add_after:function (){
39 
40           //要增加的数组
41       var newarray = [{
42               id:5,
43               name:\'向后增加数据--\'+new Date().getTime() ,
44               count:89
45       }];
46       this.setData({
47           \'list\':this.data.list.concat(newarray)
48       });
49   },
50   //删除
51   remove:function (e){
52       
53       var dataset = e.target.dataset;
54       var Index = dataset.index; //拿到是第几个数组
55       
56       this.data.list.splice(Index,1);
57       
58       this.setData({
59           list:this.data.list
60       });
61   },
62   //修改
63   edit:function (e){
64       var dataset = e.target.dataset;
65       var Index = dataset.index; //拿到是第几个数组
66       this.data.list[Index].name = \'修改了内容\'+new Date().getTime();
67       
68       this.setData({
69           list:this.data.list
70       });
71   },
72   //清空
73   clear:function (){
74       
75       this.setData({
76           list:[]
77       });
78   }
79   
80 })

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;
}

效果图如下:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap