小程序的scroll-view用的比較多了,列表頁一般也沒管它的滾動條,最近突然發現在android與ios中橫向滑動的時候表現不一樣。不一樣在哪呢,ios上直接就不顯示啊,也是沒誰了。深入想了一下,這滾動條能不能換一顏色或者換個樣式。有這衝動就立馬着手改。
1。直接打開官方demo,仔細看了一遍官方文檔,沒有任何說明,這是官方文檔的一貫作風。沒有一個屬性是去控制顯示/隱藏滾動條,更別說這樣式。所以文檔是指望不上了。
2。既然是組件,那就是css來控制的。又去看一下css中的scroll的介紹,有大概如下的屬性:參考鏈接。
上圖位置<1>:-webkit-scrollbar 滾動條整體部分。
上圖位置<2>:-webkit-scrollbar-button 滾動條的軌道的兩端按鈕,允許通過點擊微調小方塊的位置。
上圖位置<3>:-webkit-scrollbar-corner 邊角,即兩個滾動條的交匯處。
上圖位置<4>:-webkit-scrollbar-thumb 滾動條裏面的小方塊,能向上向下移動(或往左往右移動,取決於是垂直滾動條還是水平滾動條)。
上圖位置<5>:-webkit-scrollbar-track 滾動條的軌道(裏面裝有thumb)。
上圖位置<6>:-webkit-scrollbar-track-piece 內層軌道,滾動條中間部分(除去)。
不過也可以直接在小程序裏看:
3。上面是正常css裏的用法,用在小程序裏該怎麼用呢?一樣,在wxss中寫。
如:隱藏滑動條:
或者DIY:
以上寫法在android及開發工具上效果是一致的,如下圖:
4.本以爲已經大功告成,拿出我的小6掃一下預覽,嘴上笑嘻嘻,心裏MMP。呵呵!繼續想辦法!
找了半天,終於知道爲什麼橫向的滾動條隱藏了,而沒有辦法弄出來!看這裏。
原內容是:
算了算了 ,ios就別瞎折騰了,想要效果,那就自定義了!