微信小程序学习——增加选项、删除选项

本是古典何须时尚 2022-11-21 11:28 171阅读 0赞

### 微信小程序 单击按钮后多添加一个输入框 ###

首先 `WXML`中要设置循环，实现动态的添加和删除

样式表`WXSS`

.btn1 {
        
      color: white;
      background-color: thistle;
    }
    .btn1:active{
        
      background-color: turquoise;
    }
    .lines{
        
      margin-top: 40rpx;
      display: flex;
      flex-direction: row;
    }
    .in{
        
      box-sizing: border-box;
      width: 240rpx;
      height: 100rpx;
      background-color: wheat;
    }
    .choose{
        
      margin-top: 20rpx;
    }

`js`文件内容

data: {
        
        reactList:[{
        }]
      },
      add:function(e){
        
        let _list = this.data.reactList;
        _list.push({
        });
        this.setData({
        
          reactList : _list
        })
      },
          //删除第一种写法
      delete1:function(e){
        
        let _list = this.data.reactList;
        _list.pop();
        this.setData({
        
          reactList:_list
        })
      },
          //删除第二种写法
      delete2:function(e){
        
        let _list = this.data.reactList;
        let _index = e.target.dataset.index;
        _list.splice(_index,1);
        this.setData({
        
          reactList:_list
        })
      },

![在这里插入图片描述][20201101085406357.gif_pic_center]

[20201101085406357.gif_pic_center]: /images/20221120/16cd9276499941d7bb9059161a89751c.png