小程序组件 —— 28 组件案例 - 推荐商品区域 - 实现结构样式

这一节目标是实现底部推荐商品的结构和样式，由于这里要求横向滚动，所以需要使用上节介绍的 scroll-view 功能，并使用 scroll-x 属性支持横向滚动，推荐商品区域中的每一个商品是一个单独的 view，每个view 中需要写三个组件：一个 image 渲染图片，两个 text 渲染文字；

下面我们打开微信开发者工具实现这个需求，在 index.wxml 中添加下面的代码：

<view class="good-hot"><scroll-view scroll-x class="scroll-x"><view><view class="good-item"><image src="../../assets/floor/1.png" mode="" /><text>鲜花玫瑰</text><text>66</text></view></view><view><view class="good-item"><image src="../../assets/floor/2.png" mode="" /><text>鲜花玫瑰</text><text>77</text></view></view><view><view class="good-item"><image src="../../assets/floor/3.png" mode="" /><text>鲜花玫瑰</text><text>88</text></view></view><view><view class="good-item"><image src="../../assets/floor/4.png" mode="" /><text>鲜花玫瑰</text><text>99</text></view></view><view><view class="good-item"><image src="../../assets/floor/5.png" mode="" /><text>鲜花玫瑰</text><text>100</text></view></view></scroll-view>
</view>

其主要功能是使用 scroll-x 构建一个横向滑动区域，使用 view 对每一个商品进行封装，每一个商品由一张 image 图片和两段 text 文本组成；对应的图片资源可以从 gitCode 中下载（图片源自尚硅谷，非个人所有，无意冒犯）；

接着在 index.scss 中添加样式代码，如下：

.scroll-x {width: 100%;white-space: nowrap;view {display: inline-block;width: 320rpx;height: 420rpx;margin-right: 16rpx;.good-item {display: flex;flex-direction: column;justify-content: space-between;text {&:nth-of-type(1) {font-weight: bold;}}}image {width: 100%;height: 320rpx;}&:last-child {margin-right: 0rpx;}}}
}

css 样式的具体功能为：

• .scroll-x:
  • width: 100%;: 设置容器的宽度为100%
  • white-space: nowrap;: 防止子元素换行，从而实现水平滚动效果
• view:
  • display: inline-block;: 将每个视图设置为行内块元素，使其在同一行显示
  • width: 320rpx;: 设置每个视图的宽度为320rpx（假设这是一个特定的单位，如在小程序中使用的rpx）
  • height: 420rpx;: 设置每个视图的高度为420rpx
  • margin-right: 16rpx;: 设置每个视图右侧的外边距为16rpx，增加视图之间的间距
• .good-item:
  • display: flex;: 使用Flexbox布局
  • flex-direction: column;: 将子元素垂直排列
  • justify-content: space-between;: 在主轴（垂直方向）上均匀分布子元素
• text:
  • &:nth-of-type(1): 选择第一个text元素
  • font-weight: bold;: 将第一个text元素的字体加粗
• image:
  • width: 100%;: 设置图片的宽度为100%，即占满父容器的宽度
  • height: 320rpx;: 设置图片的高度为320rpx
• &:last-child:
  • margin-right: 0rpx;: 移除最后一个视图右侧的外边距

最后得到的效果为：

参考视频：尚硅谷微信小程序开发教程