微信小程序scroll-view的滾動條設置實現

小程序的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中寫。

如：隱藏滑動條：

::-webkit-scrollbar
{
width: 0;
height: 0;
color: transparent;
}

或者DIY：

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #ffffff;
}
/*定義滾動條軌道 內陰影+圓角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: yellow;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
background-color: #ff5500;
}

以上寫法在android及開發工具上效果是一致的，如下圖：

4.本以為已經大功告成，拿出我的小6掃一下預覽，嘴上笑嘻嘻，心里MMP。呵呵！繼續想辦法！

找了半天，終于知道為什么橫向的滾動條隱藏了，而沒有辦法弄出來！看這里。

原內容是：

算了算了 ，ios就別瞎折騰了，想要效果，那就自定義了！

最近在對小程序進行一些優化，發現 scroll-view 的兩處問題

1、IOS手機下scroll-view會存在上拉加載時卡頓情況
暫時解決方法(設置高度為100%，問題：設置后不能觸發上拉觸底事件)：

<scroll-view scroll-y="true" >
</scroll-view>

2、IOS手機下scroll-view會存在點擊不觸發 navigator-hover 里的css
沒有找到什么好的解決辦法，故只有用view替代了scroll-view

到此這篇關于微信小程序scroll-view的滾動條設置實現的文章就介紹到這了,更多相關小程序scroll-view滾動條內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！