小程序之scroll-view组件

scroll-view 可滚动视图区域。有时候我们的一些视图在手机指定的宽度和高度不够存放，那么可以放在 scroll-view 中，以滚动的形式显示被隐藏的内容。

滚动视图分为横向滚动和纵向滚动两种方式，下面我们对视图的滚动进行一一说明。

横向滚动

设置横向滚动（必须满足以下三点）：

1.给scroll-view添加scroll-x="{{true}}"属性（设置为允许横向滚动）

2.给scroll-view添加white-space:nowrap;属性（设置为不换行）

3.给scroll-view中的子元素设置为display:inline-block;（设置为子组件显示在一行）

示例代码如下：

.wxml文件代码

<scroll-view class="scroll-view" scroll-x="{{true}}">

  <view class="scroll-item bg_red"></view>

  <view class="scroll-item bg_yellow"></view>

  <view class="scroll-item bg_blue"></view>

  <view class="scroll-item bg_pink"></view>

  <view class="scroll-item bg_gray"></view>

</scroll-view>

.wxss文件代码

.scroll-view{

  width: 100%;

  height: 200px;

  white-space: nowrap;

  background: #43234f;

}

.scroll-view .scroll-item{

  display: inline-block;

  width: 100px;

  height: 100px;

}