微信小程序動態(tài)添加和刪除組件的現實

更新時間：2020年02月28日 08:36:21 作者：newland9999

這篇文章主要介紹了微信小程序動態(tài)添加和刪除組件的現實，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、基本思路

1、通過改變數組長度動態(tài)增刪組件

<block wx:for="{{數組}}">
 組件
</block>

2、點擊添加按鈕，增加數組的成員，組件相應增加

點擊刪除按鈕，減少數組的成員，組件相應刪除

二、示例

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)添加和刪除組件的現實的文章就介紹到這了,更多相關小程序動態(tài)添加刪除組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: