小程序之scroll-view組件

scroll-view 可滾動視圖區(qū)域。有時(shí)候我們的一些視圖在手機(jī)指定的寬度和高度不夠存放，那么可以放在 scroll-view 中，以滾動的形式顯示被隱藏的內(nèi)容。

滾動視圖分為橫向滾動和縱向滾動兩種方式，下面我們對視圖的滾動進(jìn)行一一說明。

橫向滾動

設(shè)置橫向滾動（必須滿足以下三點(diǎn)）：

1.給scroll-view添加scroll-x="{{true}}"屬性（設(shè)置為允許橫向滾動）

2.給scroll-view添加white-space:nowrap;屬性（設(shè)置為不換行）

3.給scroll-view中的子元素設(shè)置為display:inline-block;（設(shè)置為子組件顯示在一行）

示例代碼如下：

.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;

}