小程序制作笔记-动态添加表单

因为要制作在线统计用餐人数的，需要用到动态添加天数，同时如果加多了，还要删掉对应的表单，通过js的 arr.push和arr.splice来实现了，下面是代码，备忘：

Js部分

Page({
  data: {
    formitems:[]   //首先将formitems定义为数组
  },
//添加
additems(e){
    var formitems = this.data.formitems
    var newData = {id: formitems.length};  //这个用来动态添加id为对应表单个数的对象
    formitems.push(newData);  //给formitems添加1个对象
    this.setData({
      formitems: formitems, //动态渲染
    })  
  },
//删除
  delme(e){
    var delid=e.currentTarget.id; //动态获取数组下标（通过前端设id来实现）
    var formitems = this.data.formitems
    formitems.splice(delid, 1); //从id对应下标值开始，删除1个
    console.log(formitems)
    this.setData({
      formitems: formitems,  /动态渲染
    })  
  },
})

WXML部分

<form bindsubmit="formSubmit" bindreset="formReset"> 
    <input type='text' value='{{userid}}' name="userid" style="display:none;"></input>
    <view class="content" wx:for="{{formitems}}" wx:key="index" style="margin:40rpx auto;">
      <view class="inputlist">
        <view class="inlinelist">
          <view class="desc">部门</view>
            <picker bindchange="binddepart" value="{{item.idx}}" range="{{departs}}" class="inputs" id="{{index}}">
              <view class="types">{{item.idx=="" || item.idx==null ? "请点我选择": departs[item.idx]}}</view>
              <input type='text' value='{{departs[item.idx]}}' name="depart{{index}}" style="display:none;"></input>
            </picker>
        </view>
        <view class="inlinelist">
          <view class="desc">日期</view>
            <picker mode="date" value="{{item.dates}}" start="2020-02-08" end="2999-12-31" bindchange="datePickerBindchange" class="inputs" id="{{index}}">
              <view class="pickview">{{item.dates=="" || item.dates==null ? todaydate  : item.dates}}</view>
              <input type="text" name="mealdate{{index}}" value="{{item.dates=='' || item.dates==null ? todaydate  : item.dates}}" style="display:none;"></input>
            </picker>
        </view>
      </view>
      <view class="inputlist">
        <view class="inlinelist">
          <view class="desc">早餐</view>
          <input type="number" class="inputs" maxlength='5' name="breakfast{{index}}" placeholder='请输入早餐份数'></input>
        </view>
        <view class="inlinelist">
          <view class="desc">午餐</view>
        <input type="number" class="inputs" maxlength='5' name="lunch{{index}}" placeholder='请输入午餐份数'></input>
        </view>
      </view>
      <view class="inputlist">
        <view class="inlinelist">
          <view class="desc">晚餐</view>
          <input type="number" class="inputs" maxlength='5' name="dinner{{index}}" placeholder='请输入晚餐份数'></input>
        </view>
        <view class="inlinelist">
          <view class="desc">夜宵</view>
          <input type="number" class="inputs" maxlength='5' name="midnight{{index}}" placeholder='请输入夜宵份数'></input>
        </view>
      </view>
      <view class="deleteme" id="{{index}}" bindtap="delme">删除我</view>
    </view>
    <view class="additems" bindtap="additems">点我加1天</view>
    <button class="formsub bgred" formType="submit" >确认后请点我提交</button>
  </form>

WXML部分

/* pages/canteen/submeal/submeal.wxss */
.inputlist{
  display: flex;
  flex-direction: row;
  width:100%;
}
.desc{
  width:80rpx;
  height:80rpx;
  margin:10rpx;
  font-size:30rpx;
  display:flex;
  align-items: center;
  justify-content: center;
}
.inputs{
  width:60%;
  height:60rpx;
  margin:10rpx;
  border:6rpx solid #50aaff;
  border-radius: 10rpx;
  display:flex;
  align-items: center;
  justify-content: center;
}
.pickview{
  width:100%;
  height:80rpx;
  display:flex;
  align-items: center;
  justify-content: center;
}
.formsub{
  color:#fff;
  margin:20rpx auto;
}
.inlinelist{
  display:flex;
  flex-direction: row;
  width:50%;
}
.additems{
  width:50%;
  background:#50aaff;
  color:#fff;
  margin:20rpx auto;
  height:50rpx;
  padding:20rpx;
  text-align: center;
  border-radius: 10rpx;
}
.deleteme{
  width:50%;
  background:#ff7777;
  color:#fff;
  margin:20rpx auto;
  height:50rpx;
  padding:20rpx;
  text-align: center;
  border-radius: 10rpx;
}

这样，就能动态添加，然后想删哪个就删哪个了，试试吧

我是一个想做码农的行政文员