小程序中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:[]
      });
  }
  
})
复制代码

 效果图如下:

posted @   生如逆旅,一苇以航  阅读(21832)  评论(0编辑  收藏  举报
编辑推荐:
· 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应用必不可少的技术
点击右上角即可分享
微信分享提示