L'applet WeChat apprend les opérations sur les tableaux

Avant-propos

Je crois qu'après le lancement du mini-programme en version bêta publique, de nombreux amis se sont déjà précipités pour postuler pour enregistrer le mini-programme. Au cours de la phase de développement, nous avons également rencontré de nombreux problèmes, tels que l'échec de la demande de données wx.request, je ne savais pas comment transférer les données dans le tableau pendant les opérations du tableau, comment les entrées surveillent l'état des entrées de l'utilisateur et l'arrière-plan. -l'image css n'a pas pu obtenir les ressources locales, etc., ce blog aura un sujet spécial pour fournir des solutions aux amis qui rencontrent ces problèmes.

Opérations sur les tableaux

Ce dont nous parlons principalement aujourd'hui, ce sont les opérations sur les tableaux.
Je crois que pour les enfants qui ont utilisé vuejs, reactjs et d'autres mvvmframework, le fonctionnement du tableau de l'applet WeChat est très simple. Le principe est le même.

Il s'agit d'une démo simple qui a été téléchargée sur git hub, tout le monde peut le télécharger directement. Nous parlerons principalement de certaines méthodes de fonctionnement couramment utilisées dans les tableaux, notamment l'insertion de nouvelles données en avant et en arrière dans le tableau, la modification du tableau, la suppression du tableau, l'effacement du tableau et d'autres opérations que je vais vous donner. des idées pour apprendre.

Chemin d'exemple d'opération de tableau de démonstration :
/pages/<a href="http://www.php.cn/wiki/1041.html" target="_blank">array <code>/pages/<a href="http://www.php.cn/wiki/1041.html" target="_blank">array</a>/array.w<a href="http://www.php.cn/wiki/1527.html" target="_blank">xml</a>/array.wxml

Avant Insérer un nouveau données à l'envers

Page({
  data: {
        list:[{
        id:1,
        name:'应季鲜果',
        count:1
        },{
        id:2,
        name:'精致糕点',
        count:6
        },{
        id:3,
        name:'全球美食烘培原料',
        count:12
        },{
        id:4,
        name:'无辣不欢生猛海鲜',
        count:5
        }]
  }
})

<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a> concat()Nous initialisons certaines données, nous devons ajouter de nouvelles données à la liste, nous devons utiliser la méthode <code>concat()JavaScript
concat(), La méthode est utilisée pour connecter deux tableaux ou plus, cette méthode ne modifie pas le tableau existant. En fait, ce que nous disons à propos de l'insertion de données en avant et en arrière this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data()
est en fait de combiner deux tableaux pour former un nouveau tableau, puis d'utiliser this.<a href="http://%20www.php.cn/code/8209.html" target="_blank">set</a>

Data() pour le restituer sur la page.

Jetons un coup d'œil au code dans l'applet WeChat.

Insérer une démo de transfert de données

 //向前增加数据
  add_before:function (){


//要增加的数组
var newarray = [{
    id:6,
    name:'向前增加数据--'+new Date().getTime() ,
    count:89
}];

//使用concat()来把两个数组合拼起来
this.data.list = newarray.concat(this.data.list);

//将合拼之后的数据，发送到视图层，即渲染页面
//大伙请记录，修改了数据后，一定要再次执行`this.setData()`，页面才会渲染数据的。
this.setData({
      'list':    this.data.list
 });


  }

Insérer une démo de données en arrière

  //向后增加数据
  add_after:function (){

    //要增加的数组
    var newarray = [{
            id:5,
            name:'向后增加数据--'+new Date().getTime() ,
            count:89
    }];


    this.setData({
        'list':this.data.list.concat(newarray)
    });


  },

<code>concat()

Amis prudents, vous devriez trouver ça lorsque les deux paragraphes sont combinés avec

//假设这一段是我们要新增的数组
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);

, les données entre parenthèses concaténées sont différentes. La différence entre l'insertion de données en avant et en arrière est ici.

Modifier le tableau

  //修改数组
  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
});



  }

La modification des données affichées est une chose très courante dans le processus de développement.

Supprimer une certaine donnée
JavaScript splice()Tout ce qui est ajouté, modifié ou supprimé. splice()La suppression nécessite l'utilisation de la méthode

. La méthode

//删除
  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
    });


  }

ajoute/supprime des éléments du tableau, puis renvoie l'élément supprimé.

Effacer les données

//清空
  clear:function (){

    //其实就是让数组变成一个空数组即可
      this.setData({
          list:{}
      });

  }

Après avoir ajouté, modifié ou supprimé, vous devez à nouveau effacer les données.

Résumé

Aujourd'hui, nous avons principalement parlé de l'ajout, de la modification, de la suppression et de l'effacement. En fait, il existe de nombreuses façons d'utiliser les tableaux. Vous pouvez voir les captures d'écran suivantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!