Comment ajouter dynamiquement du contenu aux mini-programmes WeChat

Comment ajouter dynamiquement du contenu à l'applet WeChat : ajoutez d'abord une vue en boucle ; puis l'entrée lie un événement d'entrée et obtient l'index du bloc de vue contenant l'entrée ; utilise enfin la valeur d'index pour modifier l'entrée ; tableau Juste une valeur.

Comment ajouter dynamiquement du contenu à l'applet WeChat :

1. wx:pour la vue en boucle, ajoutez-en un. , Le contenu de wx:for est augmenté de 1, donc le contenu de la boucle utilise-t-il des nombres ou des tableaux ?

2. L'entrée est bouclée, il est donc impossible de lier différents événements bindInput à différentes entrées. Ensuite, un seul événement d'entrée peut être lié, et toutes les valeurs doivent être un tableau, alors elles doivent l'être. obtenu. Accédez à l'index du bloc de vue contenant l'entrée, puis modifiez la valeur dans le tableau via la valeur d'index. .

3. Lors de la suppression, si le contenu de la boucle est un nombre, alors seul le nombre sera réduit de un, et seul le dernier sera supprimé. Le contenu de la boucle ne peut alors être qu’un tableau. Tant que vous obtenez la valeur d'index qui doit être supprimée, puis supprimez la valeur correspondant au contenu de la boucle, vous avez terminé.

Recommandations d'apprentissage associées : Tutoriel de développement de programmes WeChat Mini

Jetons d'abord un coup d'œil à l'effet :

wxml :

<view class=&#39;add&#39; bindtap=&#39;addInput&#39;>增加</view>
<view class=&#39;box&#39; wx:for=&#39;{{array}}&#39; wx:key=&#39;&#39;>
    <view class=&#39;del&#39; bindtap=&#39;delInput&#39; data-idx=&#39;{{index}}&#39;>删除</view>
    <input type=&#39;text&#39; class=&#39;b-ipt&#39; placeholder=&#39;请输入&#39; data-idx=&#39;{{index}}&#39; value=&#39;{{inputVal[index]}}&#39; bindinput=&#39;getInputVal&#39;/>    
</view>

(1) Le tableau de la boucle est un tableau

(2) L'attribut data-idx est ajouté à la fois à la suppression et à l'entrée car les deux doivent utiliser la valeur d'index actuelle.

wxss:

.add{
    display: inline-block;
    line-height: 30px;
    padding: 0 12px;
    background: skyblue;
}
.box{
    margin-top: 10px;
    clear: both;
    overflow: hidden;
    padding: 0 15px;
}
.b-ipt{
    overflow: hidden;
    border: 1px solid #ccc;
}
.del{
    width: 40px;
    float: right;
    margin-left: 10px;
}

js:

data: {
    array:[0],//默认显示一个
    inputVal:[]//所有input的内容
},
//获取input的值
getInputVal:function(e){
    var nowIdx=e.currentTarget.dataset.idx;//获取当前索引
    var val=e.detail.value;//获取输入的值
    var oldVal=this.data.inputVal;
    oldVal[nowIdx]=val;//修改对应索引值的内容
    this.setData({
        inputVal:oldVal
    })
},
//添加input
addInput:function(){
    var old=this.data.array;
    old.push(1);//这里不管push什么，只要数组长度增加1就行
    this.setData({
        array: old
    })
},
//删除input
delInput:function(e){
    var nowidx=e.currentTarget.dataset.idx;//当前索引
    var oldInputVal=this.data.inputVal;//所有的input值
    var oldarr=this.data.array;//循环内容
    oldarr.splice(nowidx,1);    //删除当前索引的内容，这样就能删除view了
    oldInputVal.splice(nowidx,1);//view删除了对应的input值也要删掉
    if (oldarr.length < 1) {
        oldarr = [0]  //如果循环内容长度为0即删完了，必须要留一个默认的。这里oldarr只要是数组并且长度为1，里面的值随便是什么
    }
    this.setData({
        array:oldarr,
        inputVal: oldInputVal
    })
}

(1) array[0] signifie qu'il doit être bouclé une fois initialement, car wx:for boucles en fonction de la longueur du tableau. Écrivez le contenu du tableau comme vous le souhaitez, à condition que la longueur soit de 1

(2) Si vous craignez d'obtenir la valeur d'index à chaque fois lors de la saisie, ce qui affectera les performances, je vous suggère peut obtenir l'événement de valeur d'entrée modifié de bindinput à bindblur. Ce n'est pas un problème.

Recommandations d'apprentissage associées : Vidéo de programmation

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!