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


Posted in Javascript onFebruary 28, 2020

一、基本思路

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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
浅析Vue 中的 render 函数
Feb 28 #Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 #Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 #Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 #Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 #Javascript
You might like
php smarty函数扩展
2010/03/15 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
javascript 闭包详解
2015/07/02 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python调用百度语音REST API
2018/08/30 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
挖掘机司机岗位职责
2014/02/12 职场文书
未婚证明书模板
2014/10/08 职场文书
销售合作意向书范本
2015/05/08 职场文书
卡特教练观后感
2015/06/08 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers