微信小程序动态添加和删除组件的现实

一、基本思路

1、通过改变数组长度动态增删组件

 组件

2、点击添加按钮，增加数组的成员，组件相应增加

点击删除按钮，减少数组的成员，组件相应删除

二、示例

wxml:

  添加input组件
  删除Input组件
  
    
  

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：微信小程序动态添加view

 //index.html
  添加  
 
 
    {{info[index].title}} 
 

//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,  
		
		})  
	},

到此这篇关于微信小程序动态添加和删除组件的现实的文章就介绍到这了,更多相关小程序动态添加删除组件内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！