微信小程序之動態添加、刪除指定內容(view)和獲取input值

此次遇到個問題：

1. 動態的添加指定的view內容。。嗯。。很簡單。。wx:for就搞定

2. 動態添加的內容中有input，最終獲取值的時候，要獲取到全部input的值而且是一個數組。。嗯。。

3. 動態刪除指定的已經添加的view內容。。

思路：

1. wx:for 循環view，添加一個，wx:for的內容就增長1個，那麼循環的內容是用數字來循環仍是數組呢？

2. input是循環出來的，因此不可能給不一樣的input綁定不一樣的 bindInput 事件，那麼只有綁定一個輸入事件，並且全部的值必須是一個數組的話，就必需要獲取到裝input的view塊的索引，而後經過索引值來修改數組中的值。。

3. 刪除的話，若是循環的內容是數字，那麼就只有數字減一，最終刪除的只有最後一個。那麼循環的內容就只能是數組了。只要獲取到當前須要刪除的索引值，而後刪除循環內容對應的值就完成了。

先來看看效果：

wxml：

<view class='add' bindtap='addInput'>增長</view>
<view class='box' wx:for='{{array}}' wx:key=''>
    <view class='del' bindtap='delInput' data-idx='{{index}}'>刪除</view>
    <input type='text' class='b-ipt' placeholder='請輸入' data-idx='{{index}}' value='{{inputVal[index]}}' bindinput='getInputVal'/>    
</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 。這樣也沒問題。

 

這樣就完成了動態刪除和添加的效果^_^。。