使用小程序表单组件仿IOS健康App创建一个简易版的医疗急救卡
创建文件firstaidCard
首页设计:
未创建医疗急救卡时,此时只显示一个”创建医疗急救卡“按钮;已经创建医疗急救卡:此时显示用户的医疗信息,最下方显示”打电话给紧急联系人“和”编辑医疗急救卡“两个按钮
<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container">
<button>创建医疗急救卡</button>
</view>
/**index.wxss**/
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/**app.wxss**/
button{
background-color: #FF2D55;
color: white;
margin:20rpx;/* 外边距 */
}
// index.js
// 获取应用实例
Page({
/**
* 页面的初始数据
*/
data: {
myCard:true //预览后请改回false
},
/**app.wxss**/
button{
background-color: #FF2D55;
color: white;
margin:20rpx;/* 外边距 */
}
/* 标签样式 */
label{
color: #FF2D55;
margin-right: 25rpx; /*右边距*/
}
/* 水平布局 */
.row{
display: flex;
flex-direction: row; /*水平布局*/
}
/*垂直布局*/
.col{
display: flex;
flex-direction: column;/*垂直布局*/
}
/*条目盒子*/
.box{
border-bottom: 1rpx solid silver;/*1rpx 宽的银色实线下边框*/
margin: 10rpx 20rpx;
padding: 10rpx; /*内边距*/
}
/* 文本样式 */
text{
margin-right: 25rpx;
}
<!--index.wxml-->
<!-- 尚未创建医疗急救卡显示该页面 -->
<view class="container" wx:if="{
{!myCard}}">
<button>创建医疗急救卡</button>
</view>
<!-- 医疗急救卡创建完成后显示该页面 -->
<view wx:else>
<view class="row box">
<label>出生日期</label>
<text>2000-01-01</text>
<label>血型</label>
<text>A型</text>
</view>
<view class="row box">
<label>身高</label>
<text>100cm</text>
<label>体重</label>
<text>50千克</text>
</view>
<view class="col box">
<label>医疗状况</label>
<text>无</text>
</view>
<view class="col box">
<label>医疗笔记</label>
<text>无</text>
</view>
<view class="col box">
<label>过敏反应</label>
<text>无</text>
</view>
<view class="col box">
<label>用药</label>
<text>无</text>
</view>
<view class="row box">
<label>器官捐赠者</label>
<text>否</text>
</view>
<view class="row box">
<label>紧急联系人</label>
<text>10086</text>
</view>
<button>打电话给紧急联系人</button>
<button>编辑医疗急救卡</button>
</view>
医疗急救卡创建页设计
用于展示医疗信息表单,主要内容是:
生日日期:点击弹出滚动选择器选择年,月,日
医疗状况:多行文本框
医疗笔记:多行文本框
过敏反应:多行文本框
血型:点击弹出滚动选择器选择血型
器官捐赠者:切换是或者否
身高:单行文本输入框,单位为厘米
体重:单行文本输入框,单位为厘米
紧急联系人号码:单行文本输入框,输入电话号码
当页面计划使用组件:
页面整体:<form>组件
选择器:<picker>
是否开关:<switch>
多行文本输入框:<textarea>组件
单行文本输入框:<input>组件
医疗急救卡是需要点击首页按钮跳转才可以显示。
可临时将app.json属性里的form与index路径对调,以确保form页面可以直接显示出来
将form页面替换Index,使form变成首页:
原来的首页: