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

1,424次阅读

一、基本思路

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

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