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

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

article 2025/1/8 12:15:28

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

在微信小程序中，如果想实现内容滚动，需要使用 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），同样用于视觉区分

最后得到的效果如下：

在这里插入图片描述
参考视频：尚硅谷微信小程序开发教程