Sham@双目瞿因为要制作在线统计用餐人数的，需要用到动态添加天数，同时如果加多了，还要删掉对应的表单，通过js的 arr.push和arr.splice来实现了，下面是代码，备忘
js部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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部分
|
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 |
<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> |
顺带附上WXSS
|
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 |
/* 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; } |
这样，就能动态添加，然后想删哪个就删哪个了，试试吧
最新评论