微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)
更新時(shí)間：2020年02月28日 08:36:21 作者：newland9999
這篇文章主要介紹了微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
一、基本思路
1、通過(guò)改變數(shù)組長(zhǎng)度動(dòng)態(tài)增刪組件
<block wx:for="{{數(shù)組}}">
組件
</block>
2、點(diǎn)擊添加按鈕，增加數(shù)組的成員，組件相應(yīng)增加
點(diǎn)擊刪除按鈕，減少數(shù)組的成員，組件相應(yīng)刪除
二、示例
wxml:
<view>
<button bindtap='onTapAdd'>添加input組件</button>
<button bindtap='onTapDel'>刪除Input組件</button>
<block wx:for="{{obj}}" wx:key>
<input value="{{item}}"></input>
</block>
</view>
js:
data: {
obj:[]
},
/***增加組件 */
onTapAdd:function(e){
var temp=this.data.obj;
temp.push(this.data.obj.length);
this.setData({
obj:temp
})
},
/***** 刪除最后一個(gè)組件，也可以修改刪除指定組件*/
onTapDel:function(e){
var temp = this.data.obj;
temp.pop(this.data.obj.length);
this.setData({
obj: temp
})
},
PS：微信小程序動(dòng)態(tài)添加view
//index.html
<button bindtap='clickMe'> 添加</button>
<input type='input' value='{{value}}' placeholder='請(qǐng)輸入' bindblur='getValue'></input>
<view wx:for="{{info}}" wx:key="key">
<view > {{info[index].title}} </view>
</view>
//index.js
data: {
info:[],
value:'',
},
clickMe:function(){
var info = this.data.info;
var title = this.data.title;
var info2 = new Object();
info2.title = title;
info.push(info2);
console.log(info)
this.setData({
info:info
})
},
getValue:function(e){
this.setData({
title:e.detail.value,
})
},
到此這篇關(guān)于微信小程序動(dòng)態(tài)添加和刪除組件的現(xiàn)實(shí)的文章就介紹到這了,更多相關(guān)小程序動(dòng)態(tài)添加刪除組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
函數(shù)式編程語(yǔ)言一向被認(rèn)為是比其它編程語(yǔ)言更高深的語(yǔ)言。一是因?yàn)楹瘮?shù)式編程語(yǔ)言的語(yǔ)法很另類，比如Lisp語(yǔ)言，二是因?yàn)楹瘮?shù)式編程語(yǔ)言都很古老，比如Schema語(yǔ)言。在如今面向?qū)ο笳Z(yǔ)言大行其道的時(shí)代，函數(shù)式編程語(yǔ)言有其特殊的優(yōu)勢(shì)2015-10-10
使用js實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
本文給大家分享的是使用純JS實(shí)現(xiàn)的簡(jiǎn)單的拖拽效果的插件，算是對(duì)自己javascript學(xué)習(xí)的一個(gè)小的檢驗(yàn)，如果小伙伴們需要復(fù)雜的拖拽效果，還是考慮jQuery的draggable吧，更成熟一些。2015-03-03
Javascript 實(shí)現(xiàn)全屏滾動(dòng)實(shí)例代碼
這篇文章主要介紹了Javascript 實(shí)現(xiàn)全屏滾動(dòng)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了深入淺出webpack之externals的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了JavaScript 繪制餅圖的示例，幫助大家更好的利用JavaScript繪制圖表，感興趣的朋友可以了解下2021-02-02
深入理解javascript動(dòng)態(tài)插入技術(shù)
這篇文章介紹了javascript動(dòng)態(tài)插入技術(shù)，有需要的朋友可以參考一下2013-11-11
js利用數(shù)組length屬性清空和截短數(shù)組的小例子
這篇文章主要介紹了js利用數(shù)組length屬性清空和截短數(shù)組的小例子，有需要的朋友可以參考一下2014-01-01
JavaScript Promise與async/await作用詳細(xì)講解
Promise是異步編程的一種解決方案：從語(yǔ)法上講，promise是一個(gè)對(duì)象，從它可以獲取異步操作的消息；從本意上講，它是承諾，承諾它過(guò)一段時(shí)間會(huì)給你一個(gè)結(jié)果2023-01-01
ASP.NET jquery ajax傳遞參數(shù)的實(shí)例
下面小編就為大家?guī)?lái)一篇ASP.NET jquery ajax傳遞參數(shù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
關(guān)于javascript的“靜態(tài)類"...2006-10-10