微信小程式 scroll-view橫向滾動軸 怎麼出現?
阿新 • • 發佈:2019-01-25
<!--可滾動檢視區域。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;">解釋說明
- scroll_vide_waiceng====> height:110px;:scroll-view 容器高度要設定,否則效果不好用。
- width: 200px; height: 100px; 內部的view必須要設定寬高,不然是不現實的哦
white-space: nowrap;:white-space 屬性設定如何處理元素內的空白
normal 預設。規定段落中的文字不進行換行,空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標籤。
nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到br 標籤為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合併空白符序列,但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。display: inline-block;:應用此特性的元素呈現為內聯物件,周圍元素保持在同一行