1. 程式人生 > >微信小程式 scroll-view橫向滾動軸 怎麼出現?

微信小程式 scroll-view橫向滾動軸 怎麼出現?

<!--可滾動檢視區域。scroll-view 開始 -->

    <scroll-view class='scroll_vide_waiceng' scroll-x="true" style="background:black;height:110px; white-space: nowrap;"> <view style="background: red; width: 200px; height: 100px; display: inline-block;">橫向滾動一</view> <view style="background: green; width: 200px; height: 100px; display: inline-block;">
橫向滾動二</view> <view style="background: blue; width: 200px; height: 100px; display: inline-block;">橫向滾動三</view> <view style="background: yellow; width: 200px; height: 100px; display: inline-block;">橫向滾動四</view> </scroll-view> <!--可滾動檢視區域。scroll-view 結束 -->

解釋說明

  1. scroll_vide_waiceng====> height:110px;:scroll-view 容器高度要設定,否則效果不好用。
  2. width: 200px; height: 100px; 內部的view必須要設定寬高,不然是不現實的哦
  3. white-space: nowrap;:white-space 屬性設定如何處理元素內的空白 
    normal 預設。規定段落中的文字不進行換行,空白會被瀏覽器忽略。 
    pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標籤。 
    nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到br 標籤為止。 
    pre-wrap 保留空白符序列,但是正常地進行換行。 
    pre-line 合併空白符序列,但是保留換行符。 
    inherit 規定應該從父元素繼承 white-space 屬性的值。

  4. display: inline-block;:應用此特性的元素呈現為內聯物件,周圍元素保持在同一行