今天要分享的依然是使用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':'紫砂陶艺'},
])

        

          
        
        
        

          

          AI 代码解读
        
      
      

内容部分：

<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>

        

          
        
        
        

          

          AI 代码解读
        
      
      

样式部分：

.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;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

<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;
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

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