Uniapp开发鸿蒙购物应用教程之商品列表

今天要分享的依然是使用uniapp跨平台开发鸿蒙应用的系列教程，今天要做的是实现首页的商品列表，效果图如下：

今天的内容分为两部分，一部分是中间的商品分类，还有下方商品列表，不过这两部分其实是相同的布局方式，都是网格布局。

在鸿蒙原生开发中我们都使用过grid组件进行网格布局，然后通过columnsTemplate、rowsTemplate、rowsGap、columnsGap等属性来设置网格的行数、列数、大小、间距等样式。

在uniapp中也有网格布局，使用方式也和ArkTs有异曲同工之妙。我们先看一下商品分类部分怎么实现。

Uniapp没有Grid容器，写法是使用view容器存放组件，在样式选择器中设置grid布局，并且还有grid-template-rows、grid-template-columns、gap等和Arkts中相似的属性，而且作用是一样的，下面是商品分类列表部分的具体代码：

数据部分：

const goodsTypeList = ref([

{'image':'/static/潮服.jpeg','name':'潮牌运配'},

{'image':'/static/沉香木雕.jpeg','name':'工艺珍品'},

{'image':'/static/彩妆.jpeg','name':'美妆个护'},

{'image':'/static/男鞋.jpeg','name':'轻奢名品'},

{'image':'/static/雕刻.jpeg','name':'水墨雕刻'},

{'image':'/static/核桃.jpeg','name':'文玩收藏'},

{'image':'/static/翡翠.jpeg','name':'珠宝玉翠'},

{'image':'/static/汝窑.jpeg','name':'紫砂陶艺'},

])

内容部分：

<view v-for="(item, index) in goodsTypeList" :key="index" class="grid-item">

<image :src="item.image" style="width: 100%;height: 100%;"></image>

<text style="font-size: 15px;color: #4a4a4a;margin-top: 5px;">{{item.name}}</text>

</view>

样式部分：

.grid-container {

display: grid;

grid-template-rows: 1fr 1fr;

grid-template-columns: 1fr 1fr 1fr 1fr;

gap: 10px;

padding: 10px;

margin-top: 10px;

background-color: white;

}

.grid-item{

width: 100%;

height: 100px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

分类部分做好了之后，商品列表部分的布局方式和这部分是一样的，一点小区别就是列数和大小不一样，实现代码如下：

<view v-for="(item, index) in goodsList" :key="index" class="goods-item">

<image :src="item.image" style="width: 100%;"></image>

<text style="font-size: 15px;color: #4a4a4a;margin-top: 5px;">{{item.name}}</text>

<text style="font-size: 15px;color: red;margin-top: 5px;">{{item.price}}</text>

</view>

.goods-grid {

display: grid;

grid-template-columns: 1fr 1fr ;

margin-top: 10px;

background-color: white;

padding-left: 6px;

row-gap: 12px;

}

.goods-item {

display: flex;

flex-direction: column;

height: 220px;

width: calc(50vw - 9px);

background-color: white;

}

#鸿蒙三方框架##Uniapp##购物#