小程序制作笔记-动态添加表单-Sham@双目瞿

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

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>

<view class="types">{{item.idx=="" || item.idx==null ? "请点我选择": departs[item.idx]}}</view>

</picker>

</view>

<view class="pickview">{{item.dates=="" || item.dates==null ? todaydate : item.dates}}</view>

</picker>

</view>

</view>

</view>

</view>

</view>

</view>

<button class="formsub bgred" formType="submit" >确认后请点我提交</button>

</form>

顺带附上WXSS

/* 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;
}

/* 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;

}

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

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

js部分

WXML部分

顺带附上WXSS

相关推荐

评论抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

js部分

WXML部分

顺带附上WXSS

相关推荐

评论 抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏

评论抢沙发