Uniapp Development Tutorial for HarmonyOS Shopping Application - Product List

Today, we are still going to share a series of tutorials on cross-platform development of HarmonyOS applications using uniapp. What we are going to do today is to implement the product list on the home page. The effect diagram is as follows:

Today's content is divided into two parts. One part is the product classification in the middle, and the other part is the product list below. However, these two parts actually follow the same layout, both being grid layouts.
In the native development of HarmonyOS, we have all used the grid component for grid layout, and then set the styles such as the number of rows, columns, size, and spacing of the grid through properties like columnsTemplate, rowsTemplate, rowsGap, and columnsGap.
In uniapp, there is also a grid layout, and its usage method is similar to that of ArkTs. Let's first take a look at how the commodity classification section is implemented.
Uniapp does not have a grid container. The writing method is to use the view container to store components, set the grid layout in the style selector, and there are also properties similar to those in Arkts such as grid-Template-rows, grid-Template-columns, gap, etc., and their functions are the same. The following are the specific codes for the commodity classification list section:
Data section:

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':'紫砂陶艺'},
])

Content section

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

Style section:

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

After the classification part is completed, the layout of the product list part is the same as this part. The only minor difference is the number and size of the columns. The implementation code is as follows:

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