微信小程序，动态添加和删除表单项

最新推荐文章于 2024-04-27 19:48:28 发布

小涛Dirge

最新推荐文章于 2024-04-27 19:48:28 发布

阅读量3.4k

点赞数 2

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/tyt_xiaotao/article/details/122841808

版权

本文讲述了在使用VantWeapp小程序开发中，作者起初质疑为何不直接使用官方picker组件，但在遇到数据同步问题后转向van-picker，并分享了解决多个picker选中值覆盖问题的方法，以及如何在index.wxml和index.js中操作表单组件的详细过程。

摘要由CSDN通过智能技术生成

环境

小程序 UI 组件： Vant Weapp

index.wxml

在index.wxml文件中编写主要的结构代码，例如添加、删除按钮。

内心os：你都用UI组件了，为啥还要用官方的picker 组件？？？表单组件 /picker

我：一开始我也是这样想的，但使用van-picker 确实是可以实现。但我遇到了其他的问题（多个van-picker选中数据会覆盖之前选中的数据），之后换成picker 完美解决问题。

<view class="view-btn">
        <van-button class="view-btn-add" type="primary" size="small" bindtap="addList">添加项</van-button>
        <van-button type="warning" size="small" bindtap="delList">删除项</van-button>
    </view>
    <block wx:for="{{lists}}" wx:for-item="item" wx:key="{{index}}">
        <view class='picker-view'>
          <picker bindchange="bindPickerChange" value="{{item.mainRiskVal}}" range="{{mainRiskList}}" range-key="{{'name'}}" data-main-id="{{index}}" data-main-risk-list="{{mainRiskList}}">
            <view class="picker-view-item">
              <block wx:if="{{mainRiskList[item.mainRiskVal].name == '' || mainRiskList[item.mainRiskVal].name == null}}">
                <view>请选择主要类型</view> 
              </block>
              <block wx:else>
                <view>主要类型</view> 
              </block>
              <view>{{mainRiskList[item.mainRiskVal].name}}</view>
            </view>
          </picker>
        </view>
        <van-field bind:blur="onConfirmControlMeasures" value="{{ item.remark }}" data-main-id="{{index}}" label="备注" type="textarea" placeholder="请输入备注描述" clearable autosize="{{ autosize }}" />
    </block>

index.js

在 index.js文件中，实现点击"添加项"按钮添加一个表单（包含输入框和下拉框），点击"删除项"按钮删除一个表单（包含输入框和下拉框）。

注意：在下拉框选中后获取选中的数据问题

Page({
  /**
   * 页面的初始数据
   */
  data: {
    autosize: {
      maxHeight: 100,
      minHeight: 50
    },
    mainRiskList: [],
    lists: [{
      mainRiskVal: '',
      mainRisk: '', 	// 主要类型编号
      mainRiskCn: '',	// 主要类型名称
      remark: '', 		// 备注
    }],
  },
  // 添加选项
  addList: function(){
    let lists = this.data.lists;
    let newData = {
      mainRiskVal: "",
      mainRisk: "",
      mainRiskCn: "",
      remark: ""
    };
    lists.push(newData);
    this.setData({
      lists: lists,
    });
  },
  // 删除选项
  delList: function () {
    let lists = this.data.lists;
	// 至少保留一项
    if(lists.length > 1){
      lists.pop();
    }
    this.setData({
      lists: lists,
    });
  },
  //获取主要类型列表数据
  onLoadMainRiskList(){
    const that = this;
    wx.showLoading();
	// dataDictionaryType是封装后的请求方法
    dataDictionaryType({
      params: params
    }).then((res) => {
      wx.hideLoading();
      if(res){
        if(res.length > 0){
          const dictList = [];
          res.forEach(function(item, index){
            const dictObj = {};
            dictObj.id = item.id;
            dictObj.name = item.name;
            dictList.push(dictObj);
          });
          that.setData({ mainRiskList: dictList });
        }
      }
    });
  },
  // 下拉选择事件
  bindPickerChange: function(e) {
    let mainId = e.currentTarget.dataset.mainId;
    let mainRiskList = e.currentTarget.dataset.mainRiskList;
    const { value } = e.detail;
    let oldList = this.data.lists;
    if(oldList && oldList.length > 0){
      for(let i= 0; i< oldList.length; i++){
		// 获取选中的类型名称和编号
        if(i == mainId){
          oldList[i].mainRiskVal = value;
          oldList[i].mainRisk = mainRiskList[parseInt(value)].id;
          oldList[i].mainRiskCn = mainRiskList[parseInt(value)].name;
          break;
        }
      }
      this.setData({
        showMainRisk: false, 
        lists: oldList,
      });
    }
  },
  // textarea失去焦点后获取输入框的数据
  onConfirmControlMeasures(e){
    let mainId = e.currentTarget.dataset.mainId;
    const { value } = e.detail;
    let oldList = this.data.lists;
    if(oldList && oldList.length > 0){
      for(let i= 0; i< oldList.length; i++){
        if(i == mainId){
          oldList[i].remark = value;
        }
      }
      this.setData({
        lists: oldList,
      });
    }
  },
})

index.wxss

.view-btn{
    text-align: center;
    margin: 20rpx;
}

.view-btn-add{
    margin:0 50rpx;
}

.picker-view {
    margin: 10rpx 25rpx;
    font-size: 14px;
}

.picker-view-item{
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}