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

最新推荐文章于 2024-04-21 18:09:02 发布

大大da怪i

最新推荐文章于 2024-04-21 18:09:02 发布

阅读量1.7k

点赞数

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

本文链接：https://blog.csdn.net/l_jd_gululu/article/details/109411218

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

<view>
  <view class="lines">
    <button class="btn1" bindtap="add">添加</button>
    <button class="btn1" bindtap="delete">删除</button>
  </view>
  <view wx:for="{{reactList}}" wx:key="{{index}}" class="choose">
    <input type="text" placeholder="选项" class="in" data-id="{{index}}"/>
  </view> 
</view>

样式表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
    })
  },