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

大家好，欢迎来到IT知识分享网。

引言

在移动应用开发中，表单是用户与应用交互的重要方式之一。无论是注册信息、提交反馈还是预约服务，表单都扮演着关键角色。小程序作为移动应用的一种形式，其表单设计同样至关重要。本文将引导你通过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> 

结语

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

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