微信小程式如何動態添加內容-小程式開發-PHP中文網

微信小程式如何動態添加內容

coldplay.xixi

發布： 2020-08-13 13:19:26

原創

6825 人瀏覽過

微信小程式動態加入內容的方法：首先新增一個for，循環view；然後input綁定一個輸入事件，並且取得裝input的view區塊的索引；最後透過索引值來修改陣列中的值即可。

微信小程式如何動態添加內容

微信小程式動態加入內容的方法：

1. wx:for 迴圈view，新增一個， wx:for的內容就增加1個，那麼迴圈的內容是用數字來迴圈還是陣列呢？

2. input是循環出來的，所以不可能給不同的input綁定不同的bindInput 事件，那麼只有綁定一個輸入事件，而且所有的值必須是一個數組的話，就必須要獲取到裝input的view區塊的索引，然後透過索引值來修改數組中的值。。

3. 刪除的話，如果循環的內容是數字，那麼就只有數字減一，最終刪除的只有最後一個。那麼循環的內容就只能是數組了。只要取得到目前需要刪除的索引值，然後刪除循環內容對應的值就完成了。

相關學習推薦：微信小程式開發教學

#先來看看效果：

##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）循環的array是一個陣列

（2）刪除和input都加了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是根據陣列長度來循環的。 array裡面的內容隨便寫，只要保證長度為1就行

（2）如果你擔心input輸入的時候每次都要去取索引值影響性能，我建議你可以把獲取input值的事件由bindinput 改成 bindblur 。這樣也沒問題。