1. 程式人生 > >微信小程式滾動至坑

微信小程式滾動至坑

看到有人將scroll-top屬性用在了scroll-x=true的scroll-view元件上,問題顯而易見
scroll-top=”10”設定豎向滾動條位置
scroll-x=”true” 設定元件橫向滾動
自己寫了一個橫向滾動的scroll-view scroll-x=true的元件,但是死活不滾動(我頂你個肺啊)

<scroll-view 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>

1、height:110px;:scroll-view 容器高度要設定,不然你的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;:應用此特性的元素呈現為內聯物件,周圍元素保持在同一行