微信小程序实现非常实用的表单样式

首先咱们使用的是Vant Weapp组件库

构建小程序项目，引入组件库，配置项啥的就略过了！

在app.json或表单的那个文件.json中引入组件

"usingComponents": { "van-field": "@vant/weapp/field/index" }

右面有箭头的输入框

<van-field label="入职地址：" model:value="{{ value1 }}" border="{{ true }}" bind:change="onChange" right-icon="arrow" bindtap="openPicker" />

注意使用的是组件库中的icon，需要再引入icon组件

"usingComponents": { "van-icon": "@vant/weapp/icon/index" }

实现的效果如下：

普通的输入框

<van-field label="姓名：" model:value="{{ value1 }}" border="{{ true }}" bind:change="onChange" />
<van-field label="联系电话：" model:value="{{ value2 }}" border="{{ true }}" bind:change="onChange" type="number" maxlength="13" />
<van-field label="入职日期：" model:value="{{ value3 }}" border="{{ true }}" bind:change="onChange" bindtap="openPicker2" />
<van-field label="出生日期：" model:value="{{ value4 }}" border="{{ true }}" bind:change="onChange" bindtap="openPicker3" />
<van-field label="身份证号：" model:value="{{ value5 }}" border="{{ true }}" bind:change="onChange2" maxlength="18" />
<van-field label="民族：" model:value="{{ value7 }}" border="{{ true }}" bind:change="onChange" />

实现的效果如下：

带选择器的框

需要再引入单选框组件radio

"usingComponents": {
    "van-radio": "@vant/weapp/radio/index", 
    "van-radio-group": "@vant/weapp/radio-group/index"
}

wxml代码如下：

    <view class="labelBox">
      <text>性别：</text>
      <van-radio-group value="{{ radio1 }}" slot="radio" bind:change="onChange2" direction="horizontal">
        <van-radio name="1" checked-color="#07c160" custom-class='groupBox' icon-size='30rpx' data-text="男">男
        </van-radio>
        <van-radio name="2" checked-color="#07c160" custom-class='groupBox' icon-size='30rpx' data-text="女">女
        </van-radio>
      </van-radio-group>
    </view>

wxss样式如下：

.labelBox{
  width: 750rpx;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-items: center;
  padding: 20rpx 32rpx;
  border-bottom: 1px solid #f1f1f1;
}
.labelBox text{
  width: 240rpx;
  height: 48rpx;
  color: #646566;
  font-size: 28rpx;
}

实现效果如下：

多弄几个-效果如下：

带上传图片的框

需要引入上传文件组件库Uploader

"usingComponents": { "van-uploader": "@vant/weapp/uploader/index" }

wxml代码如下：

    <view class="uploaderBox">
      <text>银行卡照片：</text>
      <van-uploader file-list="{{ fileList3 }}" bind:after-read="afterRead3" deletable="{{ true }}"  upload-icon="plus" use-before-read bind:before-read="beforeRead"  />
    </view>

wxss代码如下：

.uploaderBox{
  width: 750rpx;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-items: center;
  padding: 20rpx 32rpx;
  border-bottom: 1px solid #f1f1f1;
}
.uploaderBox text{
  width: 240rpx;
  height: 48rpx;
  color: #646566;
  font-size: 28rpx;
}

效果如下：

整体弄下来 效果：