小程序组件 —— 27 组件案例 -推荐商品区域

这一节主要实现推荐商品区域功能，这里先分析一下，在微信小程序中如何实现底部的滚动；

在微信小程序中，如果想实现内容滚动，需要使用 scroll-view 组件，scrool-view 用于配置可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容，这里需要注意两个属性：

• scroll-x：允许横向滚动；
• scroll-y：允许纵向滚动；

打开微信开发者工具，在 index.wxml 中添加 scroll-view 的实现代码：

<scroll-view scroll-x class="scroll-x"><view>1</view><view>2</view><view>3</view>
</scroll-view>

scroll-x 属性接收布尔值，true 表示允许横向滚动，忽略属性值时默认 scroll-x 的值为 true；

在 index.scss 中添加样式：

.scroll-x {width: 100%;white-space: nowrap;background-color: skyblue;view {display: inline-block;width: 300rpx;height: 80rpx;&:first-child {background-color: lightseagreen;}&:last-child {background-color: lightcoral;}}
}

css 样式的功能如下：

• .scroll-x 类：
  • width: 100%;：使容器的宽度占满其父元素的100%
  • white-space: nowrap;：防止子元素换行，确保所有子元素在同一行显示，从而实现水平滚动的效果
  • background-color: skyblue;：设置容器的背景颜色为天蓝色
• view 选择器：
  • display: inline-block;：使每个子元素（view）以块级元素的形式显示，但仍然在同一行内排列
  • width: 300rpx; 和 height: 80rpx;：设置每个子元素的宽度为300rpx，高度为80rpx（rpx 是一种响应式单位，通常用于小程序开发）
• :first-child 和 :last-child 伪类：
  • &:first-child：为第一个子元素设置背景颜色为浅海洋绿（lightseagreen）
  • &:last-child：为最后一个子元素设置背景颜色为浅珊瑚色（lightcoral）

最后得到的效果如下：

除了使用 scroll-x 配置横向滚动属性，还可以使用 scroll-y 配置纵向滚动属性，在 index.wxml 中添加：

<scroll-view scroll-y class="scroll-y"><view>1</view><view>2</view><view>3</view>
</scroll-view>

scroll-y 属性接收布尔值，true 表示允许纵向滚动，忽略属性值时默认 scroll-y 的值为 true；

在 index.scss 中添加样式：

.scroll-y{height: 400rpx;background-color: skyblue;margin-top: 10rpx;view{height: 400rpx;&:first-child {background-color: lightseagreen;}&:last-child {background-color: lightcoral;}}
}

css 样式的功能如下：

• .scroll-y 类：
  • height: 400rpx;：设置容器的高度为400rpx（rpx 是一种响应式单位，通常用于小程序开发）
  • background-color: skyblue;：设置容器的背景颜色为天蓝色
  • margin-top: 10rpx;：在容器的顶部添加10rpx的外边距，以便与上方的元素保持一定的间距
• view 选择器：
  • height: 400rpx;：设置每个子元素（view）的高度为400rpx，使其与容器的高度相同
• :first-child 和 :last-child 伪类：
  • &:first-child：为第一个子元素设置背景颜色为浅海洋绿（lightseagreen），以便于视觉区分
  • &:last-child：为最后一个子元素设置背景颜色为浅珊瑚色（lightcoral），同样用于视觉区分

最后得到的效果如下：

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