分享好友 最新动态首页 最新动态分类 切换频道
uni-app(优医咨询)项目实战 - 第5天
2024-12-26 13:47

学习目标:

uni-app(优医咨询)项目实战 - 第5天

一、首页模块

在首页面中能够查看医疗相关知识的相关文章列表以及关注科室医生。

1.1 布局模板

首先在配置文件中将首页面的导航栏设置为自定义的导航栏:

接下来是布局结构相关的代码:

最后是布局样式相关的代码:

1.1.1 custom-tabs

按 组件规范新建组件,该组件的交互逻辑在前面阶段已经完成了,将其拷贝过来即可。

1.1.2 custom-sticky

最后将两个组件引入到首页中

1.2 知识列表

知识列表分为关注、推荐、减脂和饮食4个类别,每个类别的布局结构是一致的,只是数据各不相同。

1.2.1 布局模板

不同类型的知识列表的布局结构是一致的,我们将其封装成一个公共的组件:

1.2.2 组件交互

切换标签页时,每个标签页对应了一个数据列表,这些数据列表要满足以下要求:

为此我们要构造一个数据结构:

在这个数据结构的基础上根据索引值的变化来获取当前标签页对应的数据:

以上代码中要关注的重点:

1.2.3 获取数据

根据接口文档封装调用接口的方法,地址在这里。

接下来在页面中调用方法获取数据并渲染。

在上述代码中大家要注意三点:

最后将请求的数据渲染到页面当中:

在渲染文章数据时内容字数太多了,结合 css 只保留 3 行,多余的部分用省略号代替,这段 css 代码我们已经封装到 sass 中了。

1.2.4 分页数据

在移动设备分页请求数据常常结合的交互是滚动加载或者叫上拉加载,实现这个交互需要做到3点:

上述监听滚动时并未做防抖的处理,大家自已来完善一下。

1.3 医生列表

获取推荐的医生列表,允许用户关注医生。

1.3.1 布局模板
1.3.2 获取数据

根据接口文档的要求封装调用接口的方法,地址在这里。

接下来调用接口获取数据

数据渲染相关的代码如下:

1.3.3 关注医生

根据接口文档的要求封装调用接口的方法,的地址在这里。

然后调用接口关注医生,并变更按钮的样式。

二、极速问诊

按如下配置文件的分包配置创建页面,共4个页面,要先创建好页面,再去添加配置文件。

2.1 问诊类型

问诊类型分为三甲图文和普通图文两种。

2.1.1 布局模板
2.2.2 传递参数

在页面跳转的过程需要跨页面传递数,可以使用地址参数或者 Pinia 来实现跨页面数的共享。

接收地址的参数,并继续传到下一个页面,到此总计有两个参数,参数的名称及含义都是由接口规定好的:

2.2 选择科室

选择问诊医生的科室,分为一级科室和二级科室

2.2.1 布局模板
2.2.2 获取数据

根据接口文档的要求封装调用接口的方法,地址在这里。

然后在页面中调用接口获取科室数据列表

2.2.3 标签切换

在点击一级科室时被点击的一级科室要被高亮显示,即添加 类名:

2.2.4 二级科室

分析返回的数据后发现,二级科室的数据和一级科室数据是嵌套的关系,因此可根据一级科室的索值来获取相应的二级科室数据。

2.2.5 传递参数

接收地址中的参数并继续传递到下一个页面,到此总计有 3 个参数,参数的名称及含义是由接口规定的:

2.3 病情描述

对病情进行简短的描述,包括是否就诊、患病时长等信息。

2.3.1 布局模板
2.3.2 病情数据
2.3.3 uniCloud

扩展组件 uni ui 提供了文件上传的 ,通过该组件可以轻松的将图片上传到云空间,在使用 组件之前先来开通免费的云空间。

在上述代码中关键的部分如下:

2.3.4 数据验证

要求病情描述、患病时长、是否就诊必填。

2.3.5 数据缓存

此处特意做出说明,地址中的 、、 三个参数,将来会和病情描述的数据一起来创建问诊订单,并且这些数据全都是要跨页面来使用,因此配合 Pinia 将其缓存到本地。

那为什么一开始不使用 Pinia 而是通过地址传参的呢?

最新文章
Stable Diffusion超详细教程!从0-1入门到进阶
目前市面上比较权威,并能用于工作中的AI绘画软件其实就两款。一个叫Midjourney(简称MJ),另一个叫Stable-Diffusion(简称SD)。MJ需要付费使用,而SD开源免费,但是上手难度和学习成本
【N882E鲁大师下载】中兴N882E鲁大师10.9.0免费下载
手机跑分、验真假、清理垃圾专业工具!1亿用户选择的手机硬件专家。鲁大师发福利了,新用户下载即送现金!现在清理手机垃圾还能赚钱,轻松体现秒到账!===手机评测===【鉴别真假】全面检测各项指标,快速鉴别手机真伪,买到假机帮你上报维
【PicGo + gitee】图床打造,最详细攻略!
之前在下面的推文中向大家介绍了【PicGo + 阿里云OSS】的图床方案。尽管阿里云OSS的存储空间年费并不高,但是流量费用还是有些小贵的,特别是对于经常使用图床的用户,可能无法承受。GitHub图床是另一个方案,但是GitHub在国内访问速度感人
《咕咚》教学课后反思总结
《咕咚》教学课后反思总结(精选12篇)  在日常生活和工作中,我们都希望有一流的课堂教学能力,所谓反思就是能够迅速从一个场景和事态中抽身出来,看自己在前一个场景和事态中自己的表现。那么大家知道正规的反思怎么写吗?下面是小编为
一文带你搞懂什么是生成式人工智能(GenAI)
生成式人工智能(GenAI)是人工智能的一个分支,专注于创建内容。与旨在分析数据或根据规则做出决策的传统人工智能系统不同,生成式人工智能(GenAI)模型可以根据从现有信息中学习到的模式生成新数据(无论是文本、图像、音频还是其他媒体类型
Python中的生成器
代码演示:通过列表生成式,我们可以直接创建一个列表。但是,受到内存限制,列表容量肯定是有限的。而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面绝大多数元素占用的空间都白
Win10系统大小写切换提示功能详解及设置方法
Win10系统里设有大小写切换的提示功能。这个功能虽小,却非常实用。对于那些常需在大小写间切换输入的用户来说,它极大地便利了我们的使用,使我们能随时了解输入法的当前状态。功能的基本情况当我们在调整文字的大小写时,屏幕上会显示清
ppt制作ai工具!亲测上百款软件,我只推荐这10个!
在信息爆炸的时代,我们都渴望找到一种最佳方式,可以让我们的思想和观点更有效地传达出去。其实最适合的表达工具,就在我们身边——很多人熟悉的PPT工具,就是这样一个强大的媒介。不过,面对市场上琳琅满目的PPT制作工具,你是否感到无所
java 中的运算符
一元运算符:正‘+’,负‘-’,自加‘++’,自减‘–‘这四个。 ①”++“和”–“运算符,只允许用于数值类型的变量,不允许用于表达式中; "++"和”–“
VMware Fusion 13.0.0 专业激活版[替代PD的好软件!]MAC苹果系统虚拟机
VMware Fusion 可以帮助用户在mac上安装windows、windows10、ubuntu、centos、深度Linux(Deepin)等一百多种操作系统,最重要的是无需重启电脑切换系统,可以和macOS系统同时运行,就类似于macOS安装了一个应用。对于家庭用户来说足够简单
相关文章
推荐文章
发表评论
0评