Uniapp开发鸿蒙购物应用教程之商品列表
原创
Uniapp开发鸿蒙购物应用教程之商品列表
原创
幽蓝计划
发布于 2025-06-11 14:08:06
发布于 2025-06-11 14:08:06
代码可运行
运行总次数：0
代码可运行
今天要分享的依然是使用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 class="grid-container">
<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>
</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 class="goods-grid">
<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>
</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##购物#
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
