实现一个简单的小程序Form表单填写页面_小程序表单页面设计

引言

在移动应用开发中，表单是用户与应用交互的重要方式之一。无论是注册信息、提交反馈还是预约服务，表单都扮演着关键角色。小程序作为移动应用的一种形式，其表单设计同样至关重要。本文将引导你通过Uni-app和Vue框架，一步步构建一个简洁而实用的小程序表单填写页面。

表单效果图

HTML模板部分

滚动视图和表单容器

页面使用<scroll-view>组件创建一个可滚动的视图区域，内部包含用于展示表单的<view>容器和用于提交表单的按钮<view>容器。

<scroll-view class="body" :scroll-y="true">
  <view class="orderReport">
    <!-- 表单内容 -->
  </view>
  <view class="orderReportBottom">
    <!-- 底部按钮内容 -->  
  </view>
</scroll-view>

表单标题和表单项

表单的标题使用<view>标签定义，表单项则通过<u-form>组件来创建，其中包含文本输入、多行文本输入以及日期选择器。

<view class="orderReportForm">
  <view class="title">日程信息</view>
  <u-form :model="form" ref="uForm" labelWidth="80" labelPosition="left" :label-style="{'color': '#747F9E'}">
    <u-form-item borderBottom label="日程标题" prop="title" required="true">
	  <!-- 单行文本框 -->
      <u-input v-model="form.title" border="none" :customStyle="inputClass"/>
    </u-form-item>
    <u-form-item borderBottom label="日程内容" prop="content" required="true">
	  <!-- 多行文本框 -->
      <u--textarea v-model="form.content" border="none"/>
    </u-form-item>
    <u-form-item borderBottom label="开始日期"  right-icon="arrow-right" prop="startTimePoint" required="true">
      <u-button :text="form.startTimePoint? form.startTimePoint : '请选择'" @click="clickStartTime()" :custom-></u-button>
      <u-icon slot="right" name="arrow-right"></u-icon>
	  <!-- 日期选择器 -->
      <u-datetime-picker
        :show="startShow" 
        v-model="nowTime" 
        mode="datetime" 
        @confirm="cofirmStartTime"
        @cancel="startShow = false"
      ></u-datetime-picker>
    </u-form-item>
    <u-form-item borderBottom label="结束日期" prop="endTimePoint" required="true">
      <u-button :text="form.endTimePoint? form.endTimePoint : '请选择'" @click="clickEndTime()" :custom-></u-button>
      <u-icon slot="right" name="arrow-right"></u-icon>
	  <!-- 日期选择器 -->
      <u-datetime-picker
        :show="endShow" 
        v-model="nowTime" 
        mode="datetime" 
        @confirm="cofirmEndTime"
        @cancel="endShow = false"
      ></u-datetime-picker>
    </u-form-item>
  </u-form>
</view>

提交按钮

表单底部有一个提交按钮，用于提交表单数据。

<view class="orderReportBottom">
  <view class="orderReportButton">
    <u-button type="primary" @click="cofirmForm" color="#0052D9">提交</u-button>
  </view>
</view>

JavaScript脚本部分

数据声明

在Vue组件的data函数中定义了表单数据、样式、显示状态以及表单验证规则。

data() {
	return {
		// 表单数据
		form:{
			title:"",
			content:"",
			startTimePoint:"",
			endTimePoint:""
		},
		// 表单验证规则
		rules: {
			title: [{ required: true, message: '请输入日程标题',trigger: ['change','blur']}],
			content: [{ required: true, message: '请输入日程内容',trigger: ['change','blur']}],
			startTimePoint: [{ required: true, message: '请选择开始日期',trigger: ['change','blur']}],
			endTimePoint: [{ required: true, message: '请选择结束日期',trigger: ['change','blur']}],
		},
		// 按钮的自定义样式
		btnstyle:{
			borderColor: '#ffffff',
			justifyContent: 'flex-start'
		},
		// 输入框的自定义样式
		inputClass:{
			padding:'0 24rpx'
		},
		// 控制开始日期选择器的显示
		startShow:false,
		// 控制结束日期选择器的显示
		endShow:false,
		// 当前时间，用于日期选择器的初始值
		nowTime: Number(new Date()),
	}
},

生命周期和方法

在onReady生命周期方法中设置表单验证规则。定义了表单提交、日期选择器的打开与确认等方法。

// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
  this.$refs.uForm.setRules(this.rules);
},
methods:{
	// 整体表单提交
	cofirmForm(){
		console.log(this.form,'form表单提交');
		this.$refs.uForm.validate().then(valid => {
			if (valid) {
				console.log('验证通过');
			}
		}).catch(()=>{
			console.log('验证失败');
		})
	},
	// '开始日期'点击打开选择弹窗
	clickStartTime(){
		this.startShow = true
		this.nowTime =  Number(new Date())
	},
	// '结束日期'点击打开选择弹窗
	clickEndTime(){
		this.endShow = true
		this.nowTime =  Number(new Date())
	},
	// '开始日期'点击确定
	cofirmStartTime(e){
		this.form.startTimePoint = this.formatDate(new Date(e.value));
		this.startShow = false
	},
	// '结束日期'点击确定
	cofirmEndTime(e){
		this.form.endTimePoint = this.formatDate(new Date(e.value));
		this.endShow = false
	},
	// 获取2024-02-01 17:01:01 时间格式
	formatDate(date) {
		const year = date.getFullYear();
		const month = ('0' + (date.getMonth() + 1)).slice(-2);
		const day = ('0' + date.getDate()).slice(-2);
		const hours = ('0' + date.getHours()).slice(-2);
		const minutes = ('0' + date.getMinutes()).slice(-2);
		const seconds = ('0' + date.getSeconds()).slice(-2);
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	},
}

样式定义

使用SCSS编写页面和组件的样式，包括滚动视图的背景色、表单容器的布局、标题的样式以及按钮的布局和颜色。

<style lang="scss" scoped>
.body{
	height: 100vh;
	background-color: #f6f7fB;
	.orderReport{
		height: 100vh;
		display: flex;
		flex-direction: column;
		// 表单内容
		.orderReportForm{
			width: 90%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			background: #ffffff;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			border-radius: 2px;
			// 表单标题
			.title {
				font-size:32rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				&::after {
					position: relative;
					top: 8rpx;
					left: -128rpx;
					content: '';
					background: linear-gradient(129deg, #90B7FF 0%, #EAF1FF 100%);
					border-radius: 2rpx;
					opacity: 0.5;
					width: 120rpx;
					height: 16rpx;
					display: inline-block;
				}
			}
		}
		// 底部按钮内容
		.orderReportBottom{
			display: flex;
			flex-direction: column;
			background: #ffffff;
			margin-top: auto;
			height: 180rpx;
			.orderReportButton{
				width: 90%;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}
	}
}
</style>

结语

通过上述步骤，我们构建了一个功能完备、样式简洁的小程序表单填写页面。这个页面不仅提供了基本的输入功能，还包括了表单验证和用户交互设计，确保了用户能够顺畅地完成表单填写。希望本文能够帮助开发者们快速上手小程序表单的设计和实现，提升用户体验。

在小程序开发的道路上，表单设计只是冰山一角。随着技术的不断进步和用户需求的日益增长，我们还需要不断探索和学习，以创造出更加人性化、智能化的应用体验。