Uniapp开发鸿蒙购物应用教程之商品列表
【摘要】 今天要分享的依然是使用uniapp跨平台开发鸿蒙应用的系列教程，今天要做的是实现首页的商品列表，效果图如下：今天的内容分为两部分，一部分是中间的商品分类，还有下方商品列表，不过这两部分其实是相同的布局方式，都是网格布局。在鸿蒙原生开发中我们都使用过grid组件进行网格布局，然后通过columnsTemplate、rowsTemplate、rowsGap、columnsGap等属性来设置网格的...
今天要分享的依然是使用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##购物#
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）