欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-07-02 09:01:01|栏目:JavaScript代码|点击:

一、基本思路

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

上一篇:简洁短小的 JavaScript IE 浏览器判定代码

栏    目:JavaScript代码

下一篇:全面解析多种Bootstrap图片轮播效果

本文标题:微信小程序动态添加和删除组件的现实

本文地址:http://www.codeinn.net/misctech/151626.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有