您的位置:首页 > 移动开发 > 微信开发

微信小程序---点击按钮添加、删除输入框(input)

2017-10-03 23:18 507 查看
这篇文章以前几篇文章为基础!

在wxml文件中设置循环输入框和添加、删除按钮。

<block wx:for="{{lists}}" wx:key="{{index}}">
<input class='create-li' data-id="{{index}}" placeholder="选项"  bindinput='bindKeyInput'></input>
</block>
<button class='add-li' bindtap='addList'>添加选项</button>
<button class='add-li' bindtap='delList'>删除选项</button>


在js文件中设置如下,即可实现点击"添加选项"按钮添加一个输入框,点击"删除选项"按钮删除一个输入框。

Page({
data: {
lists:[{},{}],
},
addList: function(){
var  lists = this.data.lists;
var newData = {};
lists.push(newData);//实质是添加lists数组内容,使for循环多一次
this.setData({
lists: lists,
})
},
delList: function () {
var lists = this.data.lists;
lists.pop();      //实质是删除lists数组内容,使for循环少一次
this.setData({
lists: lists,
})
},
})


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: