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

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

项目界面预览：

在这里插入图片描述

一、搜索制作

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

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

在这里插入图片描述

在此我们创建一个内容包裹块，并且设置其高度为包裹、背景色为类白色：

在这里插入图片描述

我们先查看上面两块内容，其一为推荐搜索内容以及搜索框，其二为分类大块：

在这里插入图片描述

在此我们先制作一个搜索框，添加一个行命名为搜索框：

在这里插入图片描述

接着添加一个搜索框以及一个搜索按钮：

在这里插入图片描述

如何才能像我那样设置较为“美观”的按钮呢？此时我们需要对其设置对应的圆角，首先查看文本输入框的属性：

在这里插入图片描述

在此需要设置其圆角值，我设置的圆角值为18，并且取消了右上角和右下角的圆角，因为我们需要使其与按钮的圆角对应。接着我们开始查看按钮的对应的属性值，我们可以看到按钮的背景色为黄色，其圆角设置如下：

在这里插入图片描述

为了圆角的直角是左上角和左下角，在此取消了该角的圆角，这样将会使其重合，但是需要注意，一定要设置对应的高度使其统一，在此我设置的高度为 40px：

在这里插入图片描述

接着我们把搜索行的背景色修改为透明，否则就会覆盖掉原来的颜色了：

在这里插入图片描述

我们查看原页面得知，该区域是有一个圆角的，我们设置内容行的圆角值如下：

在这里插入图片描述

此时我们可以取消左下角和右下角的圆角值：

在这里插入图片描述

但此时我们发现，搜索内容行标签并不居中，我们设置一下搜索行的内容水平居中显示：

在这里插入图片描述

此时搜索内容行又距离顶部太过接近，我们可以设置其搜索行的上内边距的内容为如下：

在这里插入图片描述

由于搜索行占据了一定高度，在此我们将该高度值设置为包裹，否则接下来该行会占据过多的高度：

在这里插入图片描述

二、搜索提示

接着制作搜索提示区域内容：

在这里插入图片描述

首先创建一个行为搜索提示：

在这里插入图片描述

接着设置这个行的高度为包裹，并且使其背景色为透明：

在这里插入图片描述

接着在其添加一个文本：

在这里插入图片描述

接着我们更改其对应的背景颜色、字号及文字内容：

在这里插入图片描述

那如何才能使其具有以下呈现呢？

在这里插入图片描述

此时只需要设置其圆角以及内边距即可，内边距使其有内部的宽度，圆角使其角度圆润，设置 如下：

在这里插入图片描述

接着再进行圆角设置：

在这里插入图片描述

接着我们复制多个内容：

在这里插入图片描述

发现其会换行显示，我们需求并不需要其进行换行，如何制作呢？我们只需要在当前搜索提示行属性中，关掉其自动换行属性即可：

在这里插入图片描述

接着我们预览，发现该行不能左右滑动：

在这里插入图片描述

我们只需要设置该行的剪切属性为滚动 x（横）轴，并且隐藏其内容滚动条即可：

在这里插入图片描述

最后在设置其上下左右的内边距，使其与之有距离即可：

在这里插入图片描述

三、种类

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

在这里插入图片描述

那么此时就需要一个行来包裹这些内容，在内容行中创建一个行为种类，设置背景色透明、高度为包裹：

在这里插入图片描述

接着需要想如何在该行中添加对应的内容，在此我们可以注意到，内容每一行中有 5 个列，每列均分宽度，每个列的宽度那么则为 20%、背景色透明，那么在此创建一个列：

在这里插入图片描述

接着往这个列中添加对应的图片：

在这里插入图片描述

此时由于图片会按照本来的分辨率进行显示，我们需要设置其宽度为父容器的宽度，那么设置宽度为 100%：

在这里插入图片描述

接着在设置其一个文本，设置对应的字号：

在这里插入图片描述

此时并不居中显示，再设置这个行的显示为居中：

在这里插入图片描述

由于这些种类本身是存在一定的内部宽度的（你也可以用别的方法设置）：

在这里插入图片描述

我们设置其该行的上下左右内边距：

在这里插入图片描述

剩余的种类也是这样制作（可以复制），制作完后内容如下：

在这里插入图片描述

若你还想使其边缘的种类增加一些距离，直接在种类大块的行中添加对应的内边距内容即可：

在这里插入图片描述