最新消息:欢迎访问刘磊博客

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

微信小程序 飞翔的mouse 176浏览

一、基本思路 

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

转载请注明:刘磊博客 » 微信小程序动态添加和删除组件的现实

与本文相关的文章

  • 暂无相关文章!