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


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 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
浅析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文件上传操作实例详解
2016/09/27 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
django 外键创建注意事项说明
2020/05/20 Python
python中字典增加和删除使用方法
2020/09/30 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
运输公司工作总结
2015/08/11 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
MySQL常见优化方案汇总
2022/01/18 MySQL