【微信小程序】數組操作

Page({
  data: {
        list:[{
        id:1,
        name:'應季鮮果',
        count:1
        },{
        id:2,
        name:'精緻糕點',
        count:6
        },{
        id:3,
        name:'全球美食烘培原料',
        count:12
        },{
        id:4,
        name:'無辣不歡生猛海鮮',
        count:5
        }]
  }
})

一、向前向後新增數組

//假設這一段是我們要新增的數組
var newarray = [{
        id:5,
        name:'向後增加數據--'+new Date().getTime() ,
        count:89
}];
 
//向前--用newarray與this.data.list合拼
this.data.list = newarray.concat(this.data.list);
 
//向後--用this.data.list與newarray合拼
this.data.list = this.data.list.concat(newarray);

//頁面渲染數據
this.setData({
      'list':    this.data.list
 });

二、修改數組

//修改數組
  edit:function (e){
 
//這個參數“e”的具體作用,請參考微信小程序官方提供的說明,地址爲https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161107
 
var dataset = e.target.dataset;
var Index = dataset.index; //在通過在wxml頁面裏使用 data-index="{{index}}"傳遞過來的,是爲識別正在編輯修改哪個數組。
 
//我們要修改的數組
this.data.list[Index].name = '修改了內容'+new Date().getTime();
 
//將合拼之後的數據,發送到視圖層,即渲染頁面
//大夥請記錄,修改了數據後,一定要再次執行`this.setData()`,頁面纔會渲染數據的。
this.setData({
    list:this.data.list
});
 
}

三、刪除數據

//刪除
  remove:function (e){
 
    var dataset = e.target.dataset;
    var Index = dataset.index;
 
    //通過`index`識別要刪除第幾條數據,第二個數據爲要刪除的項目數量,通常爲1
    this.data.list.splice(Index,1);
 
    //渲染數據
    this.setData({
        list:this.data.list
    });
 }

四、清空數據

//清空
  clear:function (){
 
    //其實就是讓數組變成一個空數組即可
      this.setData({
          list:{}
      });
 
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章