用Uniapp开发鸿蒙项目七

2025-06-24 15:26:49

109次阅读

0个评论

一、写在前面

接着之前的学习，之前应时间关系并没有实现表单功能，今天就来实现表单功能，继续基于现有的 demo1 项目折腾，记录学习过程，新手小伙伴也能跟着一步步实现～

二、实现简单表单功能

（一）需求与页面准备

在首页（index 页面）添加一个简单表单，比如包含姓名、年龄输入框和提交按钮，填写信息后点击提交，模拟数据提交（实际开发可对接接口，这里先做基础演示）。

（二）编写表单代码

打开 pages/index/index.uvue，添加表单相关代码：

<template>
  <view class="container">
    <text>这是首页呀</text>
    <!-- 跳转按钮 -->
    <button @click="goToUserPage">去个人页面</button> 
    <!-- 表单区域 -->
    <view class="form-area">
      <view class="form-item">
        <text>姓名：</text>
        <input class="wh" type="text" placeholder="请输入姓名" v-model="formData.name" />
      </view>
      <view class="form-item">
        <text>年龄：</text>
        <input  class="wh" type="number" placeholder="请输入年龄" v-model="formData.age" />
      </view>
      <button class="submit-btn" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    goToUserPage() {
      uni.navigateTo({
        url: '/pages/user/user' 
      });
    },
    submitForm() {
      if (!this.formData.name || !this.formData.age) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      // 这里可实际对接接口，现在先模拟提交，打印数据
      console.log('提交的表单数据：', this.formData);
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20rpx;
  padding: 15rpx 30rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
}
.form-area {
  width: 80%;
  margin-top: 30rpx;
}
.form-item {
  display: flex;
  flex-direction: row;

  margin-bottom: 20rpx;
}
.form-item text {
  width: 120rpx;
}
.input {
  flex: 1;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
}
.submit-btn {
  width: 100%;
}
.wh{
	width: 50%;
}
</style>

这里用 v-model 双向绑定表单数据，提交时做简单的非空校验，校验不通过用 uni.showToast 提示，通过的话模拟提交（打印数据并提示成功）。