当前位置：首页 > article >正文

小程序组件 —— 25 组件案例 - 商品导航区域

article 2025/3/1 9:54:13

在这里插入图片描述
这一节主要实现商品导航区的结构和样式，商品导航区没有新的知识点，主要使用之前学习的三个组件：

view：视图容器
iamge：图片组件
text：文本组件

商品导航区由五个商品导航来组成，每一个视频导航都可以看做是一个 view，然后使用 image 来渲染图片，通过 text 来渲染文本，下面我们打开微信开发者工具来实现一下商品导航区的样式：

在 index.wxml 中找到商品导航区域，使用五个 view 用于编写五个商品导航，每个 view 商品导航中有两个组件，分别为 image 和 text，可以在 gitCode 中找到对应的图片（图片源自尚硅谷，非个人所有，无意冒犯），并填写对应的文字内容：

<view class="good-nav">
  <view>
    <image src="../../assets/category/cate-1.png" mode=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/category/cate-1.png" mode=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/category/cate-1.png" mode=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/category/cate-1.png" mode=""/>
    <text>鲜花玫瑰</text>
  </view>
  <view>
    <image src="../../assets/category/cate-1.png" mode=""/>
    <text>鲜花玫瑰</text>
  </view>
</view>

在这里插入图片描述

基本功能都填写完后，在 index.scss 中对样式进行优化：
```
.good-nav{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;
  view{
    display: flex;
    flex-direction: column;
    align-items: center;
    image{
      width: 80rpx;
      height: 80rpx;
    }
    text{
      font-size: 24rpx;
      margin-top: 12rpx;
    }
  }
}
```
- .good-nav 类:
  
  display: flex;：将 .good-nav 元素设置为弹性盒子布局，使其子元素可以灵活地排列。
  justify-content: space-between;：在主轴（默认是水平方向）上，子元素之间的空间会被平均分配，首尾元素会分别靠近容器的两端。
  background-color: #fff;：设置背景颜色为白色。
  padding: 20rpx 16rpx;：设置内边距，上下为 20rpx，左右为 16rpx。
  border-radius: 10rpx;：设置边角的圆角半径为 10rpx，使元素的角变得圆润。
- 内部的 view 元素:
  display: flex;：同样将 view 元素设置为弹性盒子布局。
  flex-direction: column;：将子元素的排列方向设置为垂直方向（列）。
  align-items: center;：在交叉轴（垂直方向）上，子元素会居中对齐。
- 内部的 image 元素:
  width: 80rpx;：设置图像的宽度为 80rpx。
  height: 80rpx;：设置图像的高度为 80rpx。
- 内部的 text 元素:
  font-size: 24rpx;：设置文本的字体大小为 24rpx。
  margin-top: 12rpx;：设置文本与其上方元素之间的外边距为 12rpx。