微信小程序動(dòng)態(tài)添加內(nèi)容的方法-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序動(dòng)態(tài)添加內(nèi)容的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家專業(yè)從事網(wǎng)站制作、成都網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站設(shè)計(jì)公司,創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、全網(wǎng)整合營(yíng)銷推廣及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

微信小程序動(dòng)態(tài)添加內(nèi)容的方法：首先添加一個(gè)for，循環(huán)view；然后input綁定一個(gè)輸入事件，并且獲取裝input的view塊的索引；最后通過索引值來修改數(shù)組中的值即可。

微信小程序動(dòng)態(tài)添加內(nèi)容的方法：

1. wx:for 循環(huán)view，添加一個(gè)，wx:for的內(nèi)容就增加1個(gè)，那么循環(huán)的內(nèi)容是用數(shù)字來循環(huán)還是數(shù)組呢？

2. input是循環(huán)出來的，所以不可能給不同的input綁定不同的 bindInput 事件，那么只有綁定一個(gè)輸入事件，而且所有的值必須是一個(gè)數(shù)組的話，就必須要獲取到裝input的view塊的索引，然后通過索引值來修改數(shù)組中的值。。

3. 刪除的話，如果循環(huán)的內(nèi)容是數(shù)字，那么就只有數(shù)字減一，最終刪除的只有最后一個(gè)。那么循環(huán)的內(nèi)容就只能是數(shù)組了。只要獲取到當(dāng)前需要?jiǎng)h除的索引值，然后刪除循環(huán)內(nèi)容對(duì)應(yīng)的值就完成了。

先來看看效果：

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='請(qǐng)輸入' data-idx='{{index}}' value='{{inputVal[index]}}' bindinput='getInputVal'/>    
</view>

（1）循環(huán)的array是一個(gè)數(shù)組

（2）刪除和input都加了data-idx屬性是因?yàn)槎夹枰玫疆?dāng)前索引值。

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],//默認(rèn)顯示一個(gè)
    inputVal:[]//所有input的內(nèi)容
},
//獲取input的值
getInputVal:function(e){
    var nowIdx=e.currentTarget.dataset.idx;//獲取當(dāng)前索引
    var val=e.detail.value;//獲取輸入的值
    var oldVal=this.data.inputVal;
    oldVal[nowIdx]=val;//修改對(duì)應(yīng)索引值的內(nèi)容
    this.setData({
        inputVal:oldVal
    })
},
//添加input
addInput:function(){
    var old=this.data.array;
    old.push(1);//這里不管push什么，只要數(shù)組長(zhǎng)度增加1就行
    this.setData({
        array: old
    })
},
//刪除input
delInput:function(e){
    var nowidx=e.currentTarget.dataset.idx;//當(dāng)前索引
    var oldInputVal=this.data.inputVal;//所有的input值
    var oldarr=this.data.array;//循環(huán)內(nèi)容
    oldarr.splice(nowidx,1);    //刪除當(dāng)前索引的內(nèi)容，這樣就能刪除view了
    oldInputVal.splice(nowidx,1);//view刪除了對(duì)應(yīng)的input值也要?jiǎng)h掉
    if (oldarr.length < 1) {
        oldarr = [0]  //如果循環(huán)內(nèi)容長(zhǎng)度為0即刪完了，必須要留一個(gè)默認(rèn)的。這里oldarr只要是數(shù)組并且長(zhǎng)度為1，里面的值隨便是什么
    }
    this.setData({
        array:oldarr,
        inputVal: oldInputVal
    })
}

（1） array[0]表示最初需要循環(huán)一次，因?yàn)閣x:for是根據(jù)數(shù)組長(zhǎng)度來循環(huán)的。array里面的內(nèi)容隨便寫，只要保證長(zhǎng)度為1就行

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

關(guān)于微信小程序動(dòng)態(tài)添加內(nèi)容的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：微信小程序動(dòng)態(tài)添加內(nèi)容的方法-創(chuàng)新互聯(lián)
新聞來源：http://bm7419.com/article18/igidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、App開發(fā)、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容