微信小程式之動態新增、刪除指定內容(view)和獲取input值
阿新 • • 發佈:2018-12-11
這次遇到個問題:
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 。這樣也沒問題。
這樣就完成了動態刪除和新增的效果^_^。。