欢迎光临
我们一直在努力

微信小程序动态添加、删除view或input并获取input中的值

需求:

动态无限制添加view或input输入框,也可以动态删除其中某个view或input输入框

思路:

通过wx:for实现动态添加、删除view或input输入框

我们通过setData 改变数组的长度,让wx:for渲染出不同数量的view或input输入框

看效果

 

直接上代码

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
    })
}

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>

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;
}

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

其它相关文章

微信小程序如何获取input中的值

转载时请标注转载于: http://www.freetechs.cn/archives/378

 

赞(3)
未经允许不得转载:自游互动 » 微信小程序动态添加、删除view或input并获取input中的值
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们