超级会员免费看
本文介绍如何在腾讯云微搭低代码平台上创建电商小程序的热销商品列表布局。通过使用流式布局（flex布局），实现商品图片每两行显示，并调整元素对齐方式以达到美观效果。在实践中，通过不断调整样式，最终完成符合需求的组件设计。
在上一节中我们介绍了轮播图的制作，本节我们主要是讲解一下热销商品的布局的设置。在电商小程序中一般会有个商品列表，以缩略图的形式展示热销的商品。那么在低代码中是如何实现的呢？先来看一下我们实际做好的布局：
我们要实现的是行列式布局，每一行我们放两个商品的图片，看一下我们设置好的组件图
组件的设计思路是外层放一个容器，里边的话放置四个容器，每个容器里又放置一个图片，那如何实现每两个图片自动换行呢？
这里就需要理解一下移动端开发的新的布局方式，流式布局（flex布局）它像水流一样，一直往下流，当然我们可以控制他是否折行显示。然后就是他的流向，先是从左到右流，然后是从上到下流，当然也可以让他向相反的方向流。
除了控制流向外，我们可以控制里边元素的显示方式，我们通常都是希望元素在水平方向和垂直方向都居中显示，这样就比较美观。
有了基本的概念之后我们就看一下样式具体怎么设置，布局
订阅专栏 解锁全文
扫一扫
1422
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
