小程序之scroll-view組件

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

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

橫向滾動(dòng)

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

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

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;

}