WeChat ミニ プログラムにコンテンツを動的に追加する方法

WeChat アプレットにコンテンツを動的に追加する方法: まず for を追加してビューをループし、次に input で入力イベントをバインドし、入力を含むビュー ブロックのインデックスを取得します。最後に、インデックス値は次のようになります。配列を変更するために使用されます。値のみです。

WeChat アプレットにコンテンツを動的に追加する方法:

1.wx:for ループ ビュー、1 つ追加します。 wx:forの内容は1ずつ増えていますが、ループの内容は数値か配列でしょうか？

2. 入力はループアウトされるため、異なる bindingInput イベントを異なる入力にバインドすることは不可能です。その場合、バインドできる入力イベントは 1 つだけであり、すべての値は配列でなければなりません。入力を含むビュー ブロックのインデックスに移動し、インデックス値を使用して配列内の値を変更します。 。

3. 削除する場合、ループの内容が数字の場合は、数字だけを1つ減らし、最後の1つだけを削除します。この場合、ループの内容は配列のみになります。削除する必要があるインデックス値を取得し、ループの内容に対応する値を削除すれば完了です。

関連する学習の推奨事項: WeChat ミニ プログラム開発チュートリアル

最初に効果を見てみましょう:

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) ループの配列は配列です

(2) 削除と入力の両方に現在のインデックス値を使用する必要があるため、data-idx 属性が追加されます。

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] は、wx:for が長さに基づいてループするため、最初に 1 回ループする必要があることを意味します。配列の。配列の内容は 1

まで好きなように記述してください(2) 入力時に毎回インデックス値を取得するのがパフォーマンスに影響するのが心配な場合は、次のようにすることをお勧めします。入力値イベントを取得できるようにbininputからbindblurに変更しました。それは問題ありません。

関連する学習に関する推奨事項: プログラミング ビデオ

以上がWeChat ミニ プログラムにコンテンツを動的に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。