100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序---点击按钮添加 删除输入框(input)

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

时间:2022-08-19 03:20:34

相关推荐

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

这篇文章以前几篇文章为基础!

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。