So fügen Sie WeChat-Miniprogrammen dynamisch Inhalte hinzu

So fügen Sie dem WeChat-Applet dynamisch Inhalte hinzu: Fügen Sie zuerst ein for hinzu und schleifen Sie die Ansicht. Binden Sie dann ein Eingabeereignis an die Eingabe und ändern Sie schließlich den Wert im Array Indexwert.

So fügen Sie dynamisch Inhalte im WeChat-Applet hinzu:

1. wx:for-Schleifenansicht, fügen Sie eine hinzu, der Inhalt von wx:for wird um 1 erhöht, dann sollte der geloopte Inhalt mit geloopt werden Zahlen oder nicht? Was ist mit Arrays?

2. Die Eingabe erfolgt in einer Schleife, daher ist es unmöglich, verschiedene bindInput-Ereignisse an verschiedene Eingaben zu binden. Wenn Sie nur ein Eingabeereignis binden können und alle Werte ein Array sein müssen, müssen Sie den Index abrufen des Ansichtsblocks und ändert dann den Wert im Array um den Indexwert. .

3. Wenn der Inhalt der Schleife beim Löschen eine Zahl ist, wird nur die Zahl um eins reduziert und nur die letzte gelöscht. Dann kann der Inhalt der Schleife nur ein Array sein. Solange Sie den zu löschenden Indexwert erhalten und dann den dem Schleifeninhalt entsprechenden Wert löschen, sind Sie fertig.

Verwandte Lernempfehlungen: WeChat Mini-Programmentwicklungs-Tutorial

Werfen wir zunächst einen Blick auf den Effekt:

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) Das Array der Schleife ist ein Array

(2) Löschen und Eingabe werden hinzugefügt Das data-idx-Attribut liegt daran, dass der aktuelle Indexwert benötigt wird.

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] bedeutet, dass es anfänglich einmal durchlaufen werden muss, da wx:for die Schleife basierend auf der Länge des Arrays durchführt. Schreiben Sie den Inhalt nach Belieben in das Array, solange die Länge 1 beträgt. (2) Wenn Sie befürchten, dass Sie bei jeder Eingabe den Indexwert abrufen müssen, was sich auf die Leistung auswirkt, empfehle ich Ihnen, dies zu ändern das Ereignis, bei dem der Eingabewert von bindinput an bindblur übertragen wird. Das ist kein Problem.

Verwandte Lernempfehlungen:

Programmiervideos

Das obige ist der detaillierte Inhalt vonSo fügen Sie WeChat-Miniprogrammen dynamisch Inhalte hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!