小程序动态添加input及删除

小程序动态添加input及删除
wxml部分
js部分
wxml部分
原理： 定义一个空数组，通过点击添加按钮向空数组中添加空值占位，通过在wxml中循环这个数组，来实现input 的添加和删除

     <block wx:for="{
  {contacelist}}">
          <view class="contact-person" >
                  <view class="page-section">
                    <view class="weui-cells__title">姓名</view>
                    <view class="weui-cells weui-cells_after-title">
                      <view class="weui-cell weui-cell_input">
                        <input class="weui-input" data-index="{
  {index}}" name="{
  {'contentName' + index}}" value='{
  {nameVal[index]}}' bindinput='getNameVal' placeholder="请输入" />
                      </view>
                    </view>
                  </view>
                  <view class="page-section">
                    <view class="weui-cells__title">手机号</view>
                    <view class="weui-cells weui-cells_after-title">
                      <view class="weui-cell weui-cell_input">
                        <input class="weui-input" data-index="{
  {index}}" name="{
  {'contentPhone' + index}}" type="number" value='{
  {phoneVal[index]}}' bindinput='getPhoneVal' maxlength="11" placeholder="请输入" placeholder-style="color：#acacac" />
                      </view>
                    </view>
                  </view>
            <view class="delete-btn" data-id="{
  {index}}" bindtap="handleDeleteProduct">删除</view>
          </view>
        </block>
        <button class="sub-btn add-btn" style="background-color: #ff9600" type="primary" bindtap='add'>+ 添加职工代表</button>
     </block>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
js部分
原理： 分别定义两个记录手机号和姓名的数组，实现删除添加时保留输入记录

data: {
// 联系人列表(添加input用，无实际作用)
contacelist: [{}],
// 联系人名称
nameVal: [],
// 联系人手机号
phoneVal: []
},
/**

• 添加联系人
  */
  add(e) {
  // 点击添加按钮，就往数组里添加一条空数据
  var _list = this.data.contacelist;
  _list.push({})
  this.setData({
  contacelist: _list
  })
  },
  //获取姓名input的值
  getNameVal:function(e){
  var nowIdx=e.currentTarget.dataset.index;//获取当前索引
  var val=e.detail.value;//获取输入的值
  var oldVal=this.data.nameVal;
  oldVal[nowIdx]=val;//修改对应索引值的内容
  this.setData({

  nameVal:oldVal
  

  })
  },
  //获取手机号input的值
  getPhoneVal:function(e){
  var nowIdx=e.currentTarget.dataset.index;//获取当前索引
  var val=e.detail.value;//获取输入的值
  var oldVal=this.data.phoneVal;
  oldVal[nowIdx]=val;//修改对应索引值的内容
  this.setData({
  phoneVal:oldVal
  })
  },
  // 删除input
  handleDeleteProduct: function (e) {
  let contacelist = this.data.contacelist
  let nameVal = this.data.nameVal
  let phoneVal = this.data.phoneVal
  let productIndex = e.currentTarget.dataset.id
  if (this.data.contacelist.length>1) {
  contacelist.splice(productIndex, 1)
  nameVal.splice(productIndex, 1)
  phoneVal.splice(productIndex, 1)
  this.setData({

  contacelist,
  nameVal,
  phoneVal
  

  })
  if (contacelist[productIndex]) {

  this.setXmove(productIndex, 0)
  

  }
  } else {
  this.setXmove(productIndex, 0)
  wx.showToast({

  title: '至少保留一个职工代表',
  icon: 'none'
  

  })
  }
  },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  也可以不用定义两个数组（名字和手机号），把值加入到循环的input的数组中，contacelist：[{name: ‘’,input: ‘’}]
  原文链接：https://blog.csdn.net/MAYA_G/article/details/107768127