《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容分类推荐商家制作

Posted 1_bit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容分类推荐商家制作相关的知识,希望对你有一定的参考价值。

这一节我们将讲解美食页下半部分内容制作:

一、完善店铺推荐

接下来继续制作以下内容:

1.1 满减信息

现在咱们在对应的商家行中添加一个行,命名为满减,并且对应的更改高度为包裹:

随后更改其背景色、字体颜色使其具有对应的样式属性:

可能你更改完后会发现该文本紧贴文字框的边缘:

那么此时就应该对应的修改其内边距,内边距也是属于对应的文本组件内容,那么其背景色也会被作用,如果是外边距则是表示对某个方向的距离,编写对应的距离并不会增加其这个元素的厚度,在此需要更高内边距:


接着我们复制多几个文本:


此时发现紧贴左侧,那么只需要设置对应的左外边距即可:

最后更改文本内容即可完成满减信息页:

1.2 商家推荐内容制作

接着制作商家推荐内容:

我们接着在商家行之下创建一个行,命名为商品,并且设置其背景色和高度属性:

接着其内部的每个信息都是一块内容,并且是列存在的形式::

我们在此创建一个列,命名为信息:

商家推荐内容分为3个,并且较为平均的占据了宽度,我们设置这个列的宽度为 33% 则可以刚好较为平均的占据整个行,并且设置背景色为透明:

接下来在信息列中添加一个图片:

我们发现该图片的过大,这是因为该图片按照了原本的比例进行了显示,这一点我们可以通过对应的图片属性值可以看出:

此时只需要设置图片的宽度为 100%,那么就会占据整个图片所在容器的最大宽度:

再接着往下添加一个文本:

随后往下看,此时下一个显示内容为一个原价和一个折扣价,这两部分在同一行显示,那么此时我们可以在这个列中再添加一个行容器,行列容器之间是可以相互进行包裹的,并且不要忘记设置对应的高度以及背景色:

最后咱们再这个行中添加两个文本即可:

此时由于当前商品信息紧贴顶部并不美观,我们直接设置商品行的上外(內)边距即可:

接着复制三个信息列:

若觉得横排显示并不不等间距,直接设置商品行的水平距离为等间距即可:

此时列水平之间将会存在一定间隙。

二、分类块、标签、推荐商家制作

接下来开始分类块和标签的制作:

2.1 分类

首先在内容页下创建一个行,命名为种类,并且设置其对应的背景色、高度内容:

接着在种类下创建第一个分类,我们可以看到,这个分类是列的形式存在:

我们创建一个列,若这个列需要在一行中要显示5个,那么每个列的宽度需要设置为 20%:

随后添加对应的图片和文本:

在此需要注意,图片宽度需要设置为 100%,占据整个容器宽。

此时我们可以看到,当前的元素并不居中对齐,咱们只需要设置其父容器类型的垂直、水平对齐为居中即可:


若想使其有一定的边缘厚度,设置其内边距即可:

接着复制多个类型列:

但在这里咱们多余的分类不会进行换行显示,所以需要设置父容器的自动换行取消:

并且若想使其可滑动,那么则需要设置其裁剪属性,横轴 x 竖轴则是 y:

此时该区域将会出现一个滚动条:

并不美观,只需要隐藏滚动条即可,在属性中设置隐藏滚动条开启:

2.2 标签

其标签内容制作也非常简单:

添加一个行命名为推荐内容,然后在其中添加对应的文本即可,文本设置对应的内边距即可解决:

2.3 推荐商家

最后的推荐商家跟其他页面的类似,在此只需要直接赋值过来即可;

以上是关于《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容分类推荐商家制作的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

《iVX 高仿美团APP制作移动端完整项目》07 会员页制作

《iVX 高仿美团APP制作移动端完整项目》09 订单页制作

《iVX 高仿美团APP制作移动端完整项目》08 会员页 标题会员卡 制作