《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程

点击整个专栏查看其它系列文章 (系列文章更新中…):《iVX 高仿美团APP制作移动端完整项目》

项目界面预览:
在这里插入图片描述

一、搜索制作

在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索栏以及分类区制作。

首先我们分析一下界面,整个内容是由一个内容大块包裹:

在这里插入图片描述
在此我们创建一个内容包裹块,并且设置其高度为包裹、背景色为类白色:
在这里插入图片描述
我们先查看上面两块内容,其一为推荐搜索内容以及搜索框,其二为分类大块:
在这里插入图片描述
在此我们先制作一个搜索框,添加一个行命名为搜索框:
在这里插入图片描述
接着添加一个搜索框以及一个搜索按钮:
在这里插入图片描述
如何才能像我那样设置较为“美观”的按钮呢?此时我们需要对其设置对应的圆角,首先查看文本输入框的属性:
在这里插入图片描述
在此需要设置其圆角值,我设置的圆角值为18,并且取消了右上角和右下角的圆角,因为我们需要使其与按钮的圆角对应。接着我们开始查看按钮的对应的属性值,我们可以看到按钮的背景色为黄色,其圆角设置如下:
在这里插入图片描述
为了圆角的直角是左上角和左下角,在此取消了该角的圆角,这样将会使其重合,但是需要注意,一定要设置对应的高度使其统一,在此我设置的高度为 40px:
在这里插入图片描述
接着我们把搜索行的背景色修改为透明,否则就会覆盖掉原来的颜色了:
在这里插入图片描述

我们查看原页面得知,该区域是有一个圆角的,我们设置内容行的圆角值如下:
在这里插入图片描述

此时我们可以取消左下角和右下角的圆角值:
在这里插入图片描述
但此时我们发现,搜索内容行标签并不居中,我们设置一下搜索行的内容水平居中显示:
在这里插入图片描述
此时搜索内容行又距离顶部太过接近,我们可以设置其搜索行的上内边距的内容为如下:
在这里插入图片描述
由于搜索行占据了一定高度,在此我们将该高度值设置为包裹,否则接下来该行会占据过多的高度:
在这里插入图片描述

二、搜索提示

接着制作搜索提示区域内容:
在这里插入图片描述
首先创建一个行为搜索提示:
在这里插入图片描述
接着设置这个行的高度为包裹,并且使其背景色为透明:
在这里插入图片描述
接着在其添加一个文本:
在这里插入图片描述
接着我们更改其对应的背景颜色、字号及文字内容:
在这里插入图片描述
那如何才能使其具有以下呈现呢?
在这里插入图片描述
此时只需要设置其圆角以及内边距即可,内边距使其有内部的宽度,圆角使其角度圆润,设置 如下:
在这里插入图片描述
接着再进行圆角设置:
在这里插入图片描述
接着我们复制多个内容:
在这里插入图片描述
发现其会换行显示,我们需求并不需要其进行换行,如何制作呢?我们只需要在当前搜索提示行属性中,关掉其自动换行属性即可:
在这里插入图片描述
接着我们预览,发现该行不能左右滑动:

在这里插入图片描述
我们只需要设置该行的剪切属性为滚动 x(横)轴,并且隐藏其内容滚动条即可:
在这里插入图片描述
最后在设置其上下左右的内边距,使其与之有距离即可:
在这里插入图片描述

三、种类

接着继续往下,查看种类区域的内容为上图下文:

在这里插入图片描述
那么此时就需要一个行来包裹这些内容,在内容行中创建一个行为种类,设置背景色透明、高度为包裹:
在这里插入图片描述

接着需要想如何在该行中添加对应的内容,在此我们可以注意到,内容每一行中有 5 个列,每列均分宽度,每个列的宽度那么则为 20%、背景色透明,那么在此创建一个列:
在这里插入图片描述
接着往这个列中添加对应的图片:
在这里插入图片描述
此时由于图片会按照本来的分辨率进行显示,我们需要设置其宽度为父容器的宽度,那么设置宽度为 100%:
在这里插入图片描述
接着在设置其一个文本,设置对应的字号:
在这里插入图片描述
此时并不居中显示,再设置这个行的显示为居中:
在这里插入图片描述
由于这些种类本身是存在一定的内部宽度的(你也可以用别的方法设置):
在这里插入图片描述
我们设置其该行的上下左右内边距:
在这里插入图片描述
剩余的种类也是这样制作(可以复制),制作完后内容如下:
在这里插入图片描述

若你还想使其边缘的种类增加一些距离,直接在种类大块的行中添加对应的内边距内容即可:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言试题十一之计算并输出下列多项式值:sn=(1-1/2)+(1/3-1/4)+…+(1/(2n-1)1/2n).

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、 题目 请编写函…

C#封装FluentValidation,用了之后通篇还是AbstractValidator,真的看不下去了

讲故事前几天看公司一个新项目使用了FluentValidation,大家都知道FluentValidation是一个非常强大的用于构建强类型验证规则的 .NET 框架,帮程序员解决了繁琐的校验问题,用起来非常爽,但我还是遇到了一件非常不爽的事情,如下代码所…

用批处理修复 win10 无法升级的问题

win10无法升级,通常的做法是先停止windows update 服务,删除临时缓存升级目录,重新启动升级服务。 写成一个批处理文件,直接用管理员身份运行一下就搞定。echo offfor /f "skip3 tokens4" %%i in (sc query wuauserv) d…

http304状态码缓存设置问题

当浏览器第一次加载资源的时候,返回一般为200,意思是成功获取资源,并会在浏览器的缓存中记录下max-age,第二次访问的时候:如果只是用浏览器打开,那么浏览器会去判断这个资源在缓存里有没有,如果…

10.2.0.5启动enterprise manager

10.2.0.5启动enterprise manager OEM作为一个实用工具,随着10g和11g的普及,OEM功能越来越强大,oem也应用越来越广泛。但是如果是10.2.0.5的版本,并且安装时间在2010年1月之后,可能会遇到OEM无法启动的情况,…

【数据结构与算法】多种语言(VB、C、C#、JavaScript)系列数据结构算法经典案例教程合集目录

文章目录1. 专栏简介2. 专栏地址3. 专栏目录1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之《数据结构与算法》 3. 专栏目录 【经典回放】多种语言系列数据结构算法:二叉树(JavaScript版)【经典回放】多种语言系列数据结构算法&#…

《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作

点击整个专栏查看其它系列文章 (系列文章更新中…):《iVX 高仿美团APP制作移动端完整项目》 项目界面预览: 一、推荐信息制作 推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一个行,设置其上下…

C语言试题十二之m个人的成绩存放在score数组中,请编写函数function,它的功能是:将低于平均分的人数作为函数值返回,将低于平均分的分数放在below所指定的数组中。

✅作者简介:大家好我是码莎拉蒂,CSDN、华为云、阿里云、51CTO博客专家🥇🥇🥇 📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 1、 题目 m个人的成绩存放在score数组中,请编写函…

yum的三种方式

RHEL5中实现各种服务的准备条件:(一)、制作YUM本地源:YUM简介:YUM是Yellow dog Updater Modified的简称,yum是软件的仓库,它可以是http或ftp站点,也可以是本地软件池,但必须包含rpm的header&…

利用百度云盘API上传文件至百度云盘

一、获取Access Token示例 1. 请您将以下HTTP请求直接粘贴到浏览器地址栏内,并按下回车键。 https://openapi.baidu.com/oauth/2.0/authorize?response_typetoken&client_idL6g70tBRRIXLsY0Z3HwKqlRE&redirect_urioob&scopenetdisk 2、执行后&#x…

Docker 容器抓包

背景介绍程序在运行期间出现问题时,通常会通过抓包的方式来分析、定位问题。非容器应用一般可以通过 fiddler、wireshark 等工具进行抓包,那么,运行在容器的应用一般通过什么方式进行抓包呢?容器应用一般可以通过 tcpdump、ngrep …

服务发现与健康监测框架Consul-DNS转发的应用

关于Consul Consul是一个提供服务注册与发现,健康监测,Key/Value存储以及多数据中心存储的分布式框架。官网地址是https://www.consul.io/,公司初步应用后我们老大觉得这东西有点意思,随即有了翻译文档的想法,由于精力…

【ArcGIS风暴】ArcGIS10.6图斑椭球面积计算原理与方法

文章目录 1. 椭球面积计算原理2. ArcGIS计算图斑椭球面积3. ArcGIS计算图斑投影平面面积1. 椭球面积计算原理 <

实践 Neutron 前的两个准备工作 - 每天5分钟玩转 OpenStack(78)

上一节配置了 linux-bridge mechanism driver&#xff0c;本节再做两个准备工作&#xff1a; 1. 检视初始的网络状态。2. 了解 linux bridge 环境中的各种网络设备。 初始网络状态 我们首先考察实验环境最初始的网络状态。随着学习的深入&#xff0c;我们会对网络不断进行新的配…

《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

点击整个专栏查看其它系列文章 &#xff08;系列文章更新中…&#xff09;&#xff1a;《iVX 高仿美团APP制作移动端完整项目》 项目界面预览&#xff1a; 一、美食页顶部商家页制作 1.1 页面主格调确认 该美食页为首页中美食按钮点击后进入的页面。该页面分为顶部的标题、搜…

利用浏览器调试功能 计算 百度网盘 文件数量

“百度网盘”程序做的比较烂&#xff0c;以百度的技术实力按说不应该如此。真正试了就知道真的不怎么样。为了统计百度网盘的文件写了以下脚本&#xff0c;仅供参考&#xff1a; var root "";//指定目录&#xff0c;空取当前目录 var totalCount 0; var startTime …

C语言试题十三之求出1到100之内能被7或者11整除,但不能同时被7和11整除的所有整书,并将他们放在a所指的数组中,通过n返回这些数的个数。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、 题目 求出1到1…

函数模板

1.函数模板的由来和概念&#xff1a;函数的重载可以实现一个函数名多用&#xff0c;将实现相同的或类似功能的函数用一个函数名来定义。这样编程者在调用同类函数时感到含义清晰&#xff0c;方法简单。但在程序中仍然要分别定义每一个函数&#xff0c;例如求三个数的最大值的函…

就在刚刚,HTTP/3 正式发布了!

经过了多年的努力&#xff0c;在 6 月 6 号&#xff0c;IETF &#xff08;互联网工程任务小组&#xff09; 正式发布了 HTTP/3 的 RFC&#xff0c; 这是超文本传输协议&#xff08;HTTP&#xff09;的第三个主要版本&#xff0c;完整的 RFC 超过了 20000 字&#xff0c;非常详细…

C语言试题十四之使字符串的前导*号不得多于n个;若多于n个,则删除多于的*号;若少于或等于n个,则什么也不做。字符串中间和尾部的*号不删除。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写函数…