微信小程序开发笔记之动态添加删除input并获取值转成对象

微信小程序开发笔记之动态添加删除input并获取值转成对象

要求动态添加删除商品。

问题：

1.动态的添加view，wx:for可以实现。

2.view里面有input组件，最终获取值的时候要获取所有input的值，需要一个数组存值。

3.动态删除指定的已添加的view的内容。

思路：

1.wx:for循环view，添加一个，wx:for的内容就增加一个，因此就需要一个数组来进行循环。

2.input是循环出来的，所以不能给不同的input绑定不同的bindinput事件，所以只能绑定一个bindinput事件，所有的值是一个数组就需要获取到input外层的view块的索引，然后通过索引值来修改数组中的值。

3.删除跟添加类似，不同点是多了一个删除input数组的值的操作，只要可以获取当前要删除的索引值，就可以删除对应的值。

先看实现的效果：

wxml：

<view class="cu-form-group">
    <view class="title">添加产品信息</view>
    <input placeholder="(新增一条产品信息)" disabled name="input"></input>
    <button class='cu-btn bg-green shadow' bindtap="additems" style="width: 70px;">添加			</button>
</view>

  <!-- 添加多个产品信息 -->
  <view wx:for="{{ formitems }}" wx:key="index">
    <view class="cu-form-group">
      <view class="title">商品品牌</view>
      <input placeholder="输入品牌"  value="{{brand[index]}}" bindinput="brandInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">商品类型</view>
      <input placeholder="输入类型"  value="{{brandname[index]}}" bindinput="brandnameInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">商品段</view>
      <input placeholder="输入商品段"  value="{{type[index]}}" bindinput="typeInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <view class="title">购买数量</view>
      <input placeholder="输入数量"  type="number" value="{{num[index]}}" bindinput="numInput" data-index="{{ index }}"></input>
    </view>
    <view class="cu-form-group">
      <button class='cu-btn bg-red shadow' style="width: 95%; height: 40px;" id="{{ index }}" bindtap="delme">删除</button>
    </view>
  </view>

1.formitems是循环的数组

2.删除个input都需要添加data-index属性，因为需要用到当前索引值。

js:

	/**
   * 页面的初始数据
   */
  data: {
    formitems:[], // 循环数组
    brand: [], // 商品品牌
    brandname: [], //商品类型
    type: [], // 商品段
    num: [], // 购买数量
  },
    
  // 添加
  additems(e){
    var formitems = this.data.formitems
    var newData = {id: formitems.length};  //这个用来动态添加id为对应表单个数的对象
    formitems.push(newData);  //给formitems添加1个对象
    console.log(formitems)
    this.setData({
      formitems: formitems, //动态渲染
    })
  },
  // 删除
  delme(e){
    let delid = e.currentTarget.id; //动态获取数组下标（通过前端设id来实现）
    let formitems = this.data.formitems
    let brand = this.data.brand
    let brandname = this.data.brandname
    let type = this.data.type
    let num = this.data.num
    //从id对应下标值开始，删除1个
    formitems.splice(delid, 1);
    brand.splice(delid,1);
    brandname.splice(delid,1);
    type.splice(delid,1);
    num.splice(delid,1);

    this.setData({
      formitems: formitems,  //动态渲染
      brand: brand,
      brandname: brandname,
      type: type,
      num: num
    })  
  },
  
  // 获取商品品牌
  brandInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.brand[index] = value;
    this.setData({ brand: this.data.brand })
  },

  // 获取商品类型
  brandnameInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.brandname[index] = value;
    this.setData({ brandname: this.data.brandname })
  },

  // 获取商品段
  typeInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.type[index] = value;
    this.setData({ type: this.data.type })
  },

  // 获取购买数量
  numInput: function (e) {
    let index = e.target.dataset.index;
    let value = e.detail.value;
    this.data.num[index] = value;
    this.setData({ num: this.data.num })
  },
  // 转成对象
  transformation () {
    var products = []
    for (let i = 0; i < this.data.brand.length; i++) {
      products.push({'brand': this.data.brand[i], 'brandname': this.data.brandname[i], 'type': this.data.type[i], 'num': this.data.num[i]})
    }
  }

即使再小的帆也能远航！