微信小程序开发系列（十二）·屏幕滚动scroll-view 组件的使用

时光の尘

已于 2024-03-05 13:27:46 修改

阅读量1.6w

点赞数 24

分类专栏：微信小程序开发文章标签：微信小程序小程序开发语言 java javascript 物联网单片机

于 2024-03-02 06:00:00 首次发布

本文链接：https://blog.csdn.net/manongdky/article/details/136369362

版权

微信小程序开发专栏收录该内容

35 篇文章 46 订阅

订阅专栏

本文详细介绍了如何在微信小程序中使用scroll-view组件实现内容的滚动，包括横向和纵向滚动，并探讨了white-space、display和justify-self等CSS属性的应用，以及如何结合这些属性创建结构样式。

摘要由CSDN通过智能技术生成

1. 微信小程序实现内容的滚动

在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。

网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。

① scroll-x：允许横向滚动

② scroll-y：允许纵向滚动

1.1 scroll-x：允许横向滚动

找到index.wxml文件，加入如下代码：

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

复制类名“scroll-x”，找到index.scss文件，加入如下代码：

.scroll-x{
  width: 100%;
  // 设置 white-space 属性为 nowrap，这会导致文本不换行，适合横向滚动的布局
  white-space: nowrap;
  background-color: skyblue;

  view{
    // 设置 display 属性为 inline-block，这会使元素以内联块级元素的方式显示，可以在同一行内显示多个元素
    display: inline-block;
    width: 300rpx;
    height: 80rpx;

    &:last-child{
      background-color: lightcoral;
    }

    &:first-child{
      background-color: lightseagreen;
    }
  }
}

展示效果：

1.2 scroll-y：允许纵向滚动

找到index.wxml文件，加入如下代码：

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

复制类名“scroll-y”，找到index.scss文件，加入如下代码：

.scroll-y{
  height: 400rpx;
  background-color: skyblue;
  // 设置上外边距为 10rpx
  margin-top: 10rpx;

  view{
    height: 400rpx;

    &:last-child{
      background-color: lightcoral;
    }

    &:first-child{
      background-color: lightseagreen;
    }

  }
}

此时展现效果：

框住部分能够上下滚动。

2. 实现结构样式

找到index.wxml文件，找到推荐商品，加入如下代码：

<!-- 推荐商品 -->
<view class="good-hot">
    <scroll-view class="scroll-x" scroll-x>
    
      <view>
        <view class="good-item">
          <image src="../../picture/images/floor.jpg" mode=""/>
          <text>鲜花玫瑰</text>
          <text>234</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../picture/images/floor.jpg" mode=""/>
          <text>鲜花玫瑰</text>
          <text>44</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../picture/images/floor.jpg" mode=""/>
          <text>鲜花玫瑰</text>
          <text>66</text>
        </view>
      </view>

      <view>
        <view class="good-item">
          <image src="../../picture/images/floor.jpg" mode=""/>
          <text>鲜花玫瑰</text>
          <text>88</text>
        </view>
      </view>
    </scroll-view>
</view>

注意：

① 更改为自己的图片路径

② 将1.微信小程序实现内容的滚动的代码注释掉

代码使用的内容：

<view class="good-hot">：这是一个视图容器，其类名为 "good-hot"。

<scroll-view class="scroll-x" scroll-x>：这是一个横向滚动的滚动视图容器，具有 scroll-x 类和 scroll-x 属性。这意味着它将在水平方向上支持滚动。

<view>：这是一个包裹 <view class="good-item"> 的父容器。

<view class="good-item">：这是一个商品项的容器，包含了商品的图片、名称和数量。

<image src="../../picture/images/floor.jpg" mode=""/>：这是一个图片元素，其 src 属性指向 "../../picture/images/floor.jpg"，并且没有指定 mode 属性。

<text>：这是一个文本元素，用于显示商品的名称和数量。

此时的页面，展示效果：

复制类名“good-hot”，找到index.scss文件，加入如下代码：

// 推荐商品区域
.good-hot{
  background-color: #fff;
  // 设置内边距为 16rpx
  padding: 16rpx;
  // 设置边框圆角为 10rpx
  border-radius: 10rpx;
  // 设置字体大小为 24rpx
  font-size: 24rpx;

  .scroll-x{
    width: 100%;
    // 设置 white-space 属性为 nowrap，表示不换行
    white-space: nowrap;

    view{
      // 设置为内联块级元素（display: inline-block）
      display:inline-block;
      width: 320rpx;
      height: 440rpx;
      // 设置右外边距为 16rpx
      margin-right: 16rpx;

      .good-item{
        // 设置为 Flex 布局，并且垂直方向布局（flex-direction: column）
        display: flex;
        flex-direction: column;
        // 设置在主轴上的对齐方式为两端对齐（justify-self: space-between）
        justify-self: space-between;

        text{
          // 当作为 view 元素的第一个子元素时，设置字体加粗（font-weight: bold）
          &:nth-of-type(1){
            font-weight: bold;
          }
        }
      }

      image{
        width: 100%;
        height: 320rpx;
      }
      
      // 当作为其父元素的最后一个子元素时，将右外边距设为0，即取消最后一个元素的右侧间距
      &:last-child{
        margin-right: 0;
      }
    }
  }
}

最终展示效果：

3. 拓展

3.1 white-space

white-space是 CSS 中用于控制元素内部空白符处理方式的属性。它有几个可能的取值，每个取值对应不同的处理方式：

normal: 默认值。连续的空白符会被合并，换行符会被当作换行处理。
nowrap: 文本不会换行，会在一行中显示，直到遇到换行符或者 <br> 标签为止。
pre: 保留空白符序列，但是会合并连续的空白符。文本中的换行符会被保留。
pre-line: 保留换行符，但是合并连续的空白符。
pre-wrap: 保留空白符序列和换行符。

3.2 display

display是 CSS 中一个非常重要的属性，用于定义元素应该生成什么框类型。这个属性有多种取值，每种取值对应不同的元素布局方式，常见取值包括：

block: 元素将被显示为块级元素，即在页面上会以独立的块显示，默认情况下会占据一整行。
inline: 元素将被显示为内联元素，即在页面上会在同一行内显示，不会换行。
inline-block: 元素将被显示为内联块级元素，即和内联元素一样在同一行内显示，但是可以设置宽高等属性，类似于块级元素。
none: 元素将不会被显示在页面上，相当于隐藏元素。

3.3 justify-self

justify-self是CSS Grid 布局中用于设置单个网格元素在其容器中的水平对齐方式的属性。这个属性只作用于网格子元素，并且可以覆盖容器级别上的对齐设置。

justify-self属性可以接受以下几种可能的取值：

start: 元素在容器中水平对齐到起始位置。
end: 元素在容器中水平对齐到末尾位置。
center: 元素在容器中水平居中对齐。
stretch: 默认值，元素在容器中水平拉伸以填充整个空间。
left: 元素在容器中水平对齐到左侧。
right: 元素在容器中水平对齐到右侧。