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

 更新时间:2020年02月28日 08:36:21   作者:newland9999  
这篇文章主要介绍了微信小程序动态添加和删除组件的现实,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、基本思路

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函数式编程程序员的工具集

    javascript函数式编程程序员的工具集

    函数式编程语言一向被认为是比其它编程语言更高深的语言。一是因为函数式编程语言的语法很另类,比如Lisp语言,二是因为函数式编程语言都很古老,比如Schema语言。在如今面向对象语言大行其道的时代,函数式编程语言有其特殊的优势
    2015-10-10
  • 使用js实现的简单拖拽效果

    使用js实现的简单拖拽效果

    本文给大家分享的是使用纯JS实现的简单的拖拽效果的插件,算是对自己javascript学习的一个小的检验,如果小伙伴们需要复杂的拖拽效果,还是考虑jQuery的draggable吧,更成熟一些。
    2015-03-03
  • Javascript 实现全屏滚动实例代码

    Javascript 实现全屏滚动实例代码

    这篇文章主要介绍了Javascript 实现全屏滚动实例代码的相关资料,需要的朋友可以参考下
    2016-12-12
  • 深入浅出webpack之externals的使用

    深入浅出webpack之externals的使用

    这篇文章主要介绍了深入浅出webpack之externals的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript 绘制饼图的示例

    JavaScript 绘制饼图的示例

    这篇文章主要介绍了JavaScript 绘制饼图的示例,帮助大家更好的利用JavaScript绘制图表,感兴趣的朋友可以了解下
    2021-02-02
  • 深入理解javascript动态插入技术

    深入理解javascript动态插入技术

    这篇文章介绍了javascript动态插入技术,有需要的朋友可以参考一下
    2013-11-11
  • js利用数组length属性清空和截短数组的小例子

    js利用数组length属性清空和截短数组的小例子

    这篇文章主要介绍了js利用数组length属性清空和截短数组的小例子,有需要的朋友可以参考一下
    2014-01-01
  • JavaScript Promise与async/await作用详细讲解

    JavaScript Promise与async/await作用详细讲解

    Promise是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果
    2023-01-01
  • ASP.NET jquery ajax传递参数的实例

    ASP.NET jquery ajax传递参数的实例

    下面小编就为大家带来一篇ASP.NET jquery ajax传递参数的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 关于javascript的“静态类"

    关于javascript的“静态类"

    关于javascript的“静态类"...
    2006-10-10

最新评论