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

目录

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

1.1  scroll-x： 允许横向滚动

1.2  scroll-y： 允许纵向滚动

2.  实现结构样式

3.  拓展

3.1  white-space

 3.2  display

3.3  justify-self

---

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>
</scr