《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中…):《iVX 高仿美团APP制作移动端完整项目》
项目界面预览:
一、搜索制作
在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索栏以及分类区制作。
首先我们分析一下界面,整个内容是由一个内容大块包裹:
在此我们创建一个内容包裹块,并且设置其高度为包裹、背景色为类白色:
我们先查看上面两块内容,其一为推荐搜索内容以及搜索框,其二为分类大块:
在此我们先制作一个搜索框,添加一个行命名为搜索框:
接着添加一个搜索框以及一个搜索按钮:
如何才能像我那样设置较为“美观”的按钮呢?此时我们需要对其设置对应的圆角,首先查看文本输入框的属性:
在此需要设置其圆角值,我设置的圆角值为18,并且取消了右上角和右下角的圆角,因为我们需要使其与按钮的圆角对应。接着我们开始查看按钮的对应的属性值,我们可以看到按钮的背景色为黄色,其圆角设置如下:
为了圆角的直角是左上角和左下角,在此取消了该角的圆角,这样将会使其重合,但是需要注意,一定要设置对应的高度使其统一,在此我设置的高度为 40px:
接着我们把搜索行的背景色修改为透明,否则就会覆盖掉原来的颜色了:
我们查看原页面得知,该区域是有一个圆角的,我们设置内容行的圆角值如下:
此时我们可以取消左下角和右下角的圆角值:
但此时我们发现,搜索内容行标签并不居中,我们设置一下搜索行的内容水平居中显示:
此时搜索内容行又距离顶部太过接近,我们可以设置其搜索行的上内边距的内容为如下:
由于搜索行占据了一定高度,在此我们将该高度值设置为包裹,否则接下来该行会占据过多的高度:
二、搜索提示
接着制作搜索提示区域内容:
首先创建一个行为搜索提示:
接着设置这个行的高度为包裹,并且使其背景色为透明:
接着在其添加一个文本:
接着我们更改其对应的背景颜色、字号及文字内容:
那如何才能使其具有以下呈现呢?
此时只需要设置其圆角以及内边距即可,内边距使其有内部的宽度,圆角使其角度圆润,设置 如下:
接着再进行圆角设置:
接着我们复制多个内容:
发现其会换行显示,我们需求并不需要其进行换行,如何制作呢?我们只需要在当前搜索提示行属性中,关掉其自动换行属性即可:
接着我们预览,发现该行不能左右滑动:
我们只需要设置该行的剪切属性为滚动 x(横)轴,并且隐藏其内容滚动条即可:
最后在设置其上下左右的内边距,使其与之有距离即可:
三、种类
接着继续往下,查看种类区域的内容为上图下文:
那么此时就需要一个行来包裹这些内容,在内容行中创建一个行为种类,设置背景色透明、高度为包裹:
接着需要想如何在该行中添加对应的内容,在此我们可以注意到,内容每一行中有 5 个列,每列均分宽度,每个列的宽度那么则为 20%、背景色透明,那么在此创建一个列:
接着往这个列中添加对应的图片:
此时由于图片会按照本来的分辨率进行显示,我们需要设置其宽度为父容器的宽度,那么设置宽度为 100%:
接着在设置其一个文本,设置对应的字号:
此时并不居中显示,再设置这个行的显示为居中:
由于这些种类本身是存在一定的内部宽度的(你也可以用别的方法设置):
我们设置其该行的上下左右内边距:
剩余的种类也是这样制作(可以复制),制作完后内容如下:
若你还想使其边缘的种类增加一些距离,直接在种类大块的行中添加对应的内边距内容即可:
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程相关推荐
- 《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作 推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
- 《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目 首先打开在线编辑器地址:https://editor.ivx ...
- 《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮 ...
- 《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容、分类、推荐商家制作
接下来开始制作超市便利页面: 一.标题 首先,我们创建一个页面,该页面设置背景颜色为黄色: 随后欧创建一个行,命名为主要,之后将会在这个主要行之中添加对应的模块内容: 该主要行,属性需要设置背景色为透 ...
- 《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容、分类、推荐商家制作
这一节我们将讲解美食页下半部分内容制作: 一.完善店铺推荐 接下来继续制作以下内容: 1.1 满减信息 现在咱们在对应的商家行中添加一个行,命名为满减,并且对应的更改高度为包裹: 随后更改其背景色.字 ...
- 《iVX 高仿美团APP制作移动端完整项目》09 订单页制作
订单页制作比较简单,界面如下: 一.标题 首先创建一个页面,命名为订单页,并且给予背景色为黄色: 随后创建一个行,命名为主要并给予对应的基础属性: 接着给予这个主要行对应的上下内边距使其给顶部具有与元 ...
- 《iVX 高仿美团APP制作移动端完整项目》08 会员页 标题、会员卡 制作
一.分类制作 我们接着往下制作该页的下半部分内容: 由于对应最下部分的商家推荐重复,直接复制即可,在此不做过多的讲解: 接下来我们创建一行命名为内容,用以作为下半部分的容器: 接着我们制作第一个种类, ...
- 基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...
- 高仿微信APP实战(一)-Actionbar的制作与应用
高仿微信APP实战(一)-Actionbar的制作与应用 本文是仿微信app实战系列的第一部分,先从简单的做起,边做边学习.从顶部actionbar开始,先看一下效果图: 一.定义主题样式 <r ...
最新文章
- Ubuntu15.0.4下Torch安装教程
- 03_TF2 Guide、文档清单(数据输入、估计器、保存模型、加速器、性能调优等)、TF2库和扩展库(TensorBoard、数据集、TensorFlow Hub、概率和统计分析库、图像处理库)
- 服务器系统上1068错误,错误1068,详细教您启动网络服务错误1068怎么解决
- 容器编排技术 -- Kubernetes Labels 和 Selectors
- 牛客网Java刷题知识点之构造函数可以调用一般函数,但是一般函数不可以直接调用构造函数...
- Basic Oracle Net Services Client-Side Configuration
- 话说P2P理财纷纷暴雷之后,那些投资者的钱去了哪里?
- 为什么说 Julia 更优于 Python?
- 【Web crawler】simulated DFS web crawler
- 用Verilog HDL实现一位二进制全减器
- python中next是什么意思_Python代码中next()函数具有哪些功能呢?
- 时间复杂度比较以及额外空间复杂度O(1)
- Android wifi PNO扫描流程(Andriod O)
- 工作经费的开支范围_经费开支范围
- Patch:虚拟DOM最核心的部分--如何对比虚拟DOM树,以及如果生成真实DOM
- Shotgun/Shotgrid入门学习笔记一
- springboot 2.x升级后出现Spring Security – There is no PasswordEncoder mapped for the id “null”的解决方案
- PHP2019参考文献,2019论文参考文献格式
- -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a
- 一个即将30岁Java程序员的自诉,在内卷的大环境之下迷惘的大龄程序员该如何破局?
热门文章
- .NET Core用数据库做配置中心加载Configuration
- Xamarin使XRPC实现接口/委托远程调用
- 如何使用 C# 中的 HashSet
- 国际化组件 Unicode (ICU) 函数库
- 探讨NET Core数据进行3DES加密或解密弱密钥问题
- GitHub Actions,卧槽!牛批!
- ASP.NET Core 实战:将 .NET Core 2.0 项目升级到 .NET Core 2.1
- 拥抱.NET Core系列:MemoryCache 缓存选项
- ASP.NET Core Razor 视图组件
- EF Core 插件 —— ToSql