搜尋
首頁微信小程式小程式開發微信小程式如何動態添加內容

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

Aug 13, 2020 pm 01:19 PM
微信小程式

微信小程式動態加入內容的方法:首先新增一個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 。這樣也沒問題。

相關學習推薦:

程式設計影片

以上是微信小程式如何動態添加內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境