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

因为要制作在线统计用餐人数的，需要用到动态添加天数，同时如果加多了，还要删掉对应的表单，通过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;

}