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

最新推荐文章于 2024-07-24 15:52:47 发布

buppt

最新推荐文章于 2024-07-24 15:52:47 发布

阅读量2w

点赞数 7

分类专栏：微信小程序文章标签：微信小程序 input

本文链接：https://blog.csdn.net/buppt/article/details/78156833

版权

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

在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