這篇文章將為大家詳細講解有關微信小程序動態(tài)添加內(nèi)容的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)是一家專業(yè)從事網(wǎng)站制作、成都網(wǎng)站建設的網(wǎng)絡公司。作為專業(yè)網(wǎng)站設計公司,創(chuàng)新互聯(lián)依托的技術實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設、全網(wǎng)整合營銷推廣及網(wǎng)站設計開發(fā)服務!微信小程序動態(tài)添加內(nèi)容的方法:首先添加一個for,循環(huán)view;然后input綁定一個輸入事件,并且獲取裝input的view塊的索引;最后通過索引值來修改數(shù)組中的值即可。
微信小程序動態(tài)添加內(nèi)容的方法:
1. wx:for 循環(huán)view,添加一個,wx:for的內(nèi)容就增加1個,那么循環(huán)的內(nèi)容是用數(shù)字來循環(huán)還是數(shù)組呢?
2. input是循環(huán)出來的,所以不可能給不同的input綁定不同的 bindInput 事件,那么只有綁定一個輸入事件,而且所有的值必須是一個數(shù)組的話,就必須要獲取到裝input的view塊的索引,然后通過索引值來修改數(shù)組中的值。。
3. 刪除的話,如果循環(huán)的內(nèi)容是數(shù)字,那么就只有數(shù)字減一,最終刪除的只有最后一個。那么循環(huán)的內(nèi)容就只能是數(shù)組了。只要獲取到當前需要刪除的索引值,然后刪除循環(huán)內(nèi)容對應的值就完成了。
先來看看效果:
wxml:
增加 刪除
(1) 循環(huán)的array是一個數(shù)組
(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的內(nèi)容 }, //獲取input的值 getInputVal:function(e){ var nowIdx=e.currentTarget.dataset.idx;//獲取當前索引 var val=e.detail.value;//獲取輸入的值 var oldVal=this.data.inputVal; oldVal[nowIdx]=val;//修改對應索引值的內(nèi)容 this.setData({ inputVal:oldVal }) }, //添加input addInput:function(){ var old=this.data.array; old.push(1);//這里不管push什么,只要數(shù)組長度增加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;//循環(huán)內(nèi)容 oldarr.splice(nowidx,1); //刪除當前索引的內(nèi)容,這樣就能刪除view了 oldInputVal.splice(nowidx,1);//view刪除了對應的input值也要刪掉 if (oldarr.length < 1) { oldarr = [0] //如果循環(huán)內(nèi)容長度為0即刪完了,必須要留一個默認的。這里oldarr只要是數(shù)組并且長度為1,里面的值隨便是什么 } this.setData({ array:oldarr, inputVal: oldInputVal }) }
(1) array[0]表示最初需要循環(huán)一次,因為wx:for是根據(jù)數(shù)組長度來循環(huán)的。array里面的內(nèi)容隨便寫,只要保證長度為1就行
(2) 如果你擔心input輸入的時候每次都要去取索引值影響性能,我建議你可以把獲取input值的事件由 bindinput 改成 bindblur 。這樣也沒問題。
關于微信小程序動態(tài)添加內(nèi)容的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。