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

古城微笑少年丶 2022-11-26 09:41 248阅读 0赞

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