Uniapp 开发鸿蒙购物应用教程之商品列表
今天要分享的依然是使用 uniapp 跨平台开发鸿蒙应用的系列教程，今天要做的是实现首页的商品列表，效果图如下：
图片今天的内容分为两部分，一部分是中间的商品分类，还有下方商品列表，不过这两部分其实是相同的布局方式，都是网格布局。
在鸿蒙原生开发中我们都使用过 grid 组件进行网格布局，然后通过 columnsTemplate、rowsTemplate、rowsGap、columnsGap 等属性来设置网格的行数、列数、大小、间距等样式。
在 uniapp 中也有网格布局，使用方式也和 ArkTs 有异曲同工之妙。我们先看一下商品分类部分怎么实现。
Uniapp 没有 Grid 容器，写法是使用 view 容器存放组件，在样式选择器中设置 grid 布局，并且还有 grid-template-rows、grid-template-columns、gap 等和 Arkts 中相似的属性，而且作用是一样的，下面是商品分类列表部分的具体代码：
数据部分：
复制代码
内容部分：
复制代码
样式部分：
复制代码
分类部分做好了之后，商品列表部分的布局方式和这部分是一样的，一点小区别就是列数和大小不一样，实现代码如下：
复制代码
#鸿蒙三方框架 ##Uniapp##购物 #
还未添加个人签名 2025-05-09 加入
还未添加个人简介
评论