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