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 class="grid-container">
    <view v-for="(item, index) in goodsTypeList" :key="index" class="grid-item">
      <image :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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##购物#