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

最新推荐文章于 2025-05-13 00:11:25 发布

原创

最新推荐文章于 2025-05-13 00:11:25 发布 · 2.4k 阅读

标签

#js #小程序

收录于

本文介绍了一种在小程序中动态添加和删除表单的方法，使用JS的arr.push和arr.splice实现，适用于在线统计用餐人数等场景。文章详细展示了如何在WXML中绑定事件和数据，实现动态表单的增删功能。

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