溫州羅鳳鎮(zhèn)微信小程序如何動態(tài)添加內(nèi)容
閱讀 46162 · 發(fā)布日期 2020-08-24 17:26 · 溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】
微信小程序動態(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.... 【溫州小程序開發(fā),溫州微信公眾號,平陽做網(wǎng)站,平陽網(wǎng)站建設(shè)公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號,山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...
微信小程序動態(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ù)組了。
只要獲取到當(dāng)前需要刪除的索引值,然后刪除循環(huán)內(nèi)容對應(yīng)的值就完成了。
相關(guān)學(xué)習(xí)推薦:
微信小程序開發(fā)教程先來看看效果:
wxml:
bindtap='
addInput'
>增加
wx:for='
{
{
array}
}
'
wx:key='
'
>
bindtap='
delInput'
data-idx='
{
{
index}
}
'
>刪除
class='
b-ipt'
placeholder='
請輸入'
data-idx='
{
{
index}
}
'
value='
{
{
inputVal[index]}
}
'
bindinput='
getInputVal'
/>
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)顯示一個 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;
//修改對應(yīng)索引值的內(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;
//當(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刪除了對應(yīng)的input值也要刪掉 if (oldarr.length oldarr = [0] //如果循環(huán)內(nèi)容長度為0即刪完了,必須要留一個默認(rèn)的。
這里oldarr只要是數(shù)組并且長度為1,里面的值隨便是什么 }
this.setData({
array:oldarr, inputVal: oldInputVal }
) }
(1) array[0]表示最初需要循環(huán)一次,因?yàn)閣x:for是根據(jù)數(shù)組長度來循環(huán)的。
array里面的內(nèi)容隨便寫,只要保證長度為1就行(2) 如果你擔(dān)心input輸入的時候每次都要去取索引值影響性能,我建議你可以把獲取input值的事件由 bindinput 改成 bindblur 。
這樣也沒問題。
相關(guān)學(xué)習(xí)推薦:
編程視頻以上就是微信小程序如何動態(tài)添加內(nèi)容的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
微信
分享相關(guān)標(biāo)簽:
微信小程序 動態(tài)添加內(nèi)容本文原創(chuàng)發(fā)布php中文網(wǎng),轉(zhuǎn)載請注明出處,感謝您的尊重!
上一篇:
微信小程序不能用怎么辦
下一篇:
怎么看小程序版本號相關(guān)文章相關(guān)視頻小程序商城與淘寶網(wǎng)有什么不同?小程序接口是什么意思?怎樣編輯小程序頁面內(nèi)容?微信小程序不能用怎么辦微信小程序如何動態(tài)添加內(nèi)容登錄小程序中心認(rèn)識小程序的目錄結(jié)構(gòu)布局奔牛課堂小程序搜素框 [溫州做小程序]