微信小程序动态添加和删除组件的实现_F11 - 专业站长和开发者的学习网站

分享到

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

微信小程序 来源：互联网搜集作者：秩名发布时间：2020-02-29 15:15:53 人浏览

摘要

一、基本思路 1、通过改变数组长度动态增删组件 ? 1 2 3 block wx:for = {{数组}} 组件 / block 2、点击添加按钮，增加数组的成员，组件相应增加点击删除按钮，减少数组的成员，组件相应删除二、示例 wxml: ? 1 2 3 4 5 6 7 view button bindtap = onTapAd

一、基本思路

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,  

								        })  

								    },

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/newland9999/article/details/82685637

Tag : 微信小程序(83)动态(13)

微信小程序实现简易的计算器功能

一个初入IC的硅农，硬件编程经验3个月。偶然接触了微信小程序编程，然后自己写了一个计算器，希望得到改进意见。功能： 1、计算 + -
微信小程序实现短信登录的方法

1.界面效果预览 2.uView安装 uView官网： https://www.uviewui.com 以npm安装为例,执行：npm install uview-ui即可 3.uView配置 3.1 main.js中引入 import uView from
实现微信小程序wxs日期时间处理的介绍

WXS（WeiXin Script）是小程序的一套脚本语言，wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。其中包括了很多日常使用的
微信小程序flexbox layout快速实现基本布局的解决

问题描述 flexbox layout 弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便，但
微信小程序实现搜索功能的方法

在页面search.wxml中，定义一个input输入框以及搜索的点击按钮，分别为它们绑定点击事件handleInputChange()和handleSearch()的事件，同时在它们的下
PHP实现微信小程序在线支付功能的方法

小程序访问地址：payfee.php如果使用TP框架处理后台的话，写成方法即可 include WeixinPay.php;$appid=; //小程序appid$openid= $_POST[id];$mch_id=; //微信支付
钉钉小程序组件之自定义模态框（弹窗封装实现

背景开发钉钉小程序中需要用到模态框文档里也没有自己搞一个效果大概长这个样点击指定按钮，弹出模态框，里面的内容可以自定义，
详解微信小程序利用for循环解决内容变更问题

问题描述学习小程序的小伙伴可能会有这样的问题：微信小程序的页面内容要发生改变，在小程序中如何快速的来创造一个格式相同，但仅
微信小程序开发搜索功能(前端+后端+数据库)

界面比较丑，主要实现逻辑... 超级简单的界面，表单，提交按钮，搜索结果展示区域... 下面是index.wxml !--index.wxml--form bindsubmit=formSubmit!--提
微信小程序加载数据库真实数据的代码

微信小程序要加载网站数据库里面的真实数据，有一个硬性的要求，就是你的网站域名必须是https协议才行，要不然你第一步服务器域名配置

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

您可能感兴趣的文章 :

微信小程序实现简易的计算器功能

微信小程序实现短信登录的方法

实现微信小程序wxs日期时间处理的介绍

微信小程序flexbox layout快速实现基本布局的解决

微信小程序实现搜索功能的方法

PHP实现微信小程序在线支付功能的方法

钉钉小程序组件之自定义模态框（弹窗封装实现

详解微信小程序利用for循环解决内容变更问题

微信小程序开发搜索功能(前端+后端+数据库)

微信小程序加载数据库真实数据的代码

微信小程序checkbox使用教程方法

微信小程序实现弹出菜单动画

解决微信小程序swiper使用网络图片不

微信小程序实现短信登录的方法

微信小程序实现渐入渐出动画效果的