微信小程序 多个input点击按钮添加和删除

微信小程序 多个input添加和删除

效果图展示

xml注意事项： input中添加 value=’{{names[index+1]}}’ data-index=’{{index}} bindblur=“bindinput”'

 <view class="adds">
      <view class="lis">
        <view class="title">货品名称</view>
        <input type="text" class="myI" name=''  bindblur="inputGoods" placeholder="请输入" />
      </view>
      <view class="lis">
        <view class="title">件数</view>
        <input type="number" class="myI" name='' bindblur="inputGoods1" placeholder="请输入" />
      </view>
      <view class="lis">
        <view class="title">重量(kg)</view>
        <input type="digit" class="myI" name=''  bindblur="inputGoods2" placeholder="请输入" />
      </view>
    </view>
    <view class="adds" wx:for="{{addGoods}}" wx:key="idnex">
      <view class="yuans" bindtap="deletePrice" data-index="{{index}}">-</view>
      <view class="lis">
        <view class="title">货品名称</view>
        <input type="text" class="myI" name='' value='{{names[index+1]}}'  data-index='{{index}}' bindblur="bindinput" placeholder="请输入" />
      </view>
      <view class="lis">
        <view class="title">件数</view>
        <input type="number" class="myI" name='' value='{{jianshus[index+1]}}' data-index='{{index}}' bindblur="bindinput1" placeholder="请输入" />
      </view>
      <view class="lis">
        <view class="title">重量(kg)</view>
        <input type="digit" class="myI" name='' value='{{zhongliangs[index+1]}}' data-index='{{index}}' bindblur="bindinput2" placeholder="请输入" />
      </view>
    </view>

***css样式 ***

input {
    width: 590rpx;
    height: 80rpx;
    background: #E6F0FF;
    border-radius: 32rpx;
    line-height: 80rpx;
    padding: 0 40rpx;
}
.adds {
  /* margin-bottom: 40rpx; */
  z-index: -1;
  display: flex;
}

.lis {
  width: 28%;
  margin-left: 20rpx;
}

.lis:first-child {
  width: 37%;
  margin-left: 0;
}

.myI {
  width: auto !important;
}

.plus {
  width: 200rpx;
  height: 55rpx;
  line-height: 55rpx;
  border-radius: 36rpx;
  background-color: #ffffff;
  color: rgba(101, 166, 255, 100);
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(101, 166, 255, 100);
  margin-top: 30rpx;
  margin-bottom: 120rpx;
  /* margin-left: 460rpx; */
}

.plus text {
  font-size: 20px;
  color: rgba(101, 166, 255, 100);
  font-weight: bold;
  line-height: 55rpx;
}

.yuans {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  line-height: 40rpx;
  background-color: red;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-top: 120rpx;
}

代码有些繁琐 有空可以简化 需要给后台传 每个添加单个项的一维数组 （给后台names ,jianshus ,zhongliangs的数据）

data:{
 	addGoods: [],
    name: '',
    jianshu: '',
    zhongliang: '',
    goodsName: '',
    goodsJianshu: '',
    goodsZhongliang: '',
    names: [],//货品名称数组
    jianshus: [],//件数数组
    zhongliangs: [],//重量数组
   },
// 添加
  addGoodsSub: util.throttle(function () {
    var old = this.data.addGoods;
    old.push(1);//这里不管push什么，只要数组长度增加1就行
    this.setData({
      addGoods: old
    })
  }),

  // 删除
  deletePrice: util.throttle(function (e) {
    that = this
    var oldArr = this.data.addGoods;//循环内容
    var nowIdx = e.currentTarget.dataset.index;//当前索引
    //所有的input值
    var names = that.data.names;
    var jianshus = that.data.jianshus;
    var zhongliangs = that.data.zhongliangs;
    oldArr.splice(nowIdx, 1);    //删除当前索引的内容，这样就能删除view了
    //view删除了对应的input值也要删掉
    names.splice(nowIdx + 1, 1);
    jianshus.splice(nowIdx + 1, 1);
    zhongliangs.splice(nowIdx + 1, 1);
    if (oldArr.length < 1) {
      oldArr = []  //如果循环内容长度为0即删完了 ,初始化
    }
    this.setData({
      addGoods: oldArr,
      names,
      jianshus,
      zhongliangs
    })
  }),

  // 添加货品中 input失去焦点获取数据
  bindinput(e) {
    var nowIdx = e.currentTarget.dataset.index;//获取当前索引
    var val = e.detail.value;//获取输入的值
    var names = this.data.names;
    names[nowIdx + 1] = val;//修改对应索引值的内容
    this.setData({
      names: names
    })
  },
  bindinput1(e) {
    var nowIdx = e.currentTarget.dataset.index;
    var val = e.detail.value;
    var jianshus = this.data.jianshus;
    jianshus[nowIdx + 1] = val;
    this.setData({
      jianshus
    })

  },
  bindinput2(e) {
    var nowIdx = e.currentTarget.dataset.index;
    var val = e.detail.value;
    var zhongliangs = this.data.zhongliangs;
    zhongliangs[nowIdx + 1] = val;
    this.setData({
      zhongliangs
    })
  },

  //先把固定货品添加数组中
  inputGoods(e) {
    var goodsName = e.detail.value;
    var names = this.data.names.concat(goodsName); //先把固定货品添加数组中
    this.setData({
      goodsName,
      names
    })
  },

  inputGoods1(e) {
    var jianshus = this.data.jianshus;
    var goodsJianshu = e.detail.value;
    jianshus = jianshus.concat(goodsJianshu);
    this.setData({
      goodsJianshu,
      jianshus
    })
  },

  inputGoods2(e) {
    var zhongliangs = this.data.zhongliangs;
    var goodsZhongliang = e.detail.value;
    zhongliangs = zhongliangs.concat(goodsZhongliang);
    this.setData({
      goodsZhongliang,
      zhongliangs
    })
  },