微信小程序之动态添加、删除指定view和获取input值

遇到的问题：

动态的添加指定的view内容。。嗯。。很简单。。wx:for就搞定！！
动态添加的内容中有input，最终获取值的时候，要获取到所有input的值并且是一个数组。
动态删除指定的已经添加的view内容。

思路

wx:for 循环view，添加一个，wx:for的内容就增加1个，那么循环的内容是用数字来循环还是数组呢？
input是循环出来的，所以不可能给不同的input绑定不同的 bindInput 事件，那么只有绑定一个输入事件，而且所有的值必须是一个数组的话，就必须要获取到装input的view块的索引，然后通过索引值来修改数组中的值。
删除的话，如果循环的内容是数字，那么就只有数字减一，最终删除的只有最后一个。那么循环的内容就只能是数组了。只要获取到当前需要删除的索引值，然后删除循环内容对应的值就完成了。

wxml：

<view class='add' bindtap='addInput'>增加</view>
<view class='box' wx:for='{{array}}' wx:key=''><view class='del' bindtap='delInput' data-idx='{{index}}'>删除</view><input type='text' class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{inputVal[index]}}' bindinput='getInputVal'/>
</view>

（1）循环的array是一个数组

（2）删除和input都加了data-idx属性是因为都需要用到当前索引值。

wxss：

.add{display: inline-block;line-height: 30px;padding: 0 12px;background: skyblue;
}
.box{margin-top: 10px;clear: both;overflow: hidden;padding: 0 15px;
}
.b-ipt{overflow: hidden;border: 1px solid #ccc;
}
.del{width: 40px;float: right;margin-left: 10px;
}

js：

data: {array:[0],//默认显示一个inputVal:[]//所有input的内容
},
//获取input的值
getInputVal:function(e){var nowIdx=e.currentTarget.dataset.idx;//获取当前索引var val=e.detail.value;//获取输入的值var oldVal=this.data.inputVal;oldVal[nowIdx]=val;//修改对应索引值的内容this.setData({inputVal:oldVal})
},
//添加input
addInput:function(){var old=this.data.array;old.push(1);//这里不管push什么，只要数组长度增加1就行this.setData({array: old})
},
//删除input
delInput:function(e){var nowidx=e.currentTarget.dataset.idx;//当前索引var oldInputVal=this.data.inputVal;//所有的input值var oldarr=this.data.array;//循环内容oldarr.splice(nowidx,1);    //删除当前索引的内容，这样就能删除view了oldInputVal.splice(nowidx,1);//view删除了对应的input值也要删掉if (oldarr.length < 1) {oldarr = [0]  //如果循环内容长度为0即删完了，必须要留一个默认的。这里oldarr只要是数组并且长度为1，里面的值随便是什么}this.setData({array:oldarr,inputVal: oldInputVal})
}

（1） array[0]表示最初需要循环一次，因为wx:for是根据数组长度来循环的。array里面的内容随便写，只要保证长度为1就行。

（2）如果你担心input输入的时候每次都要去取索引值影响性能，我建议你可以把获取input值的事件由 bindinput 改成 bindblur 。这样也没问题。

如果有收获！！！希望老铁们来个三连，点赞、收藏、转发。

微信小程序之动态添加、删除指定view和获取input值相关推荐

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名
目的,在微信小程序的swiper中达到除了active的哪一项外的其他项都有一个半透明的白色浮层. 效果图如下: 功能实现: 我们使用三元表达式即可实现动态设置标签中的class属性如下: < ...
微信小程序van-tabs动态添加标签
微信小程序上面滑动tab的动态设置 wxml文件内布局 <van-tabs id="tabs" active="{{ active }}" bind:cl ...
微信小程序基础-动态添加和删除组件
一.基本思路 1.通过改变数组长度动态增删组件 <block wx:for="{{数组}}">组件 </block> 2.点击添加按钮,增加数组的成员,组件 ...
微信小程序，动态添加和删除表单项
环境小程序 UI 组件: Vant Weapp index.wxml 在index.wxml文件中编写主要的结构代码,例如添加.删除按钮. 内心os:你都用UI组件了,为啥还要用官方的picker ...
微信小程序点击添加/删除表单
wxml : <view class="container"><block wx:for="{{lists}}" wx:key="{ ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
在微信小程序中动态的添加类名
在微信小程序中动态的添加类名 <view data-num="1" class="takeTaxi {{_num == 1 ? 'active' : ''}}&qu ...
微信小程序的动态表单，实现房屋租赁的多租客录入
0 前言本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务. 在阅读本文前,您需要对微信小程序的开发有一个初步的了解,以便更容易的学会开发动态表单. 作者主页:Desi ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...

微信小程序之动态添加、删除指定view和获取input值

微信小程序之动态添加、删除指定view和获取input值相关推荐

最新文章

热门文章