快捷導(dǎo)航

微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)

更新時(shí)間：2020年03月02日 15:49:07 作者：鎏嫣宮守護(hù)

這篇文章主要介紹了微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

小程序的scroll-view用的比較多了，列表頁(yè)一般也沒(méi)管它的滾動(dòng)條，最近突然發(fā)現(xiàn)在android與ios中橫向滑動(dòng)的時(shí)候表現(xiàn)不一樣。不一樣在哪呢，ios上直接就不顯示啊，也是沒(méi)誰(shuí)了。深入想了一下，這滾動(dòng)條能不能換一顏色或者換個(gè)樣式。有這沖動(dòng)就立馬著手改。

1。直接打開(kāi)官方demo，仔細(xì)看了一遍官方文檔，沒(méi)有任何說(shuō)明，這是官方文檔的一貫作風(fēng)。沒(méi)有一個(gè)屬性是去控制顯示/隱藏滾動(dòng)條，更別說(shuō)這樣式。所以文檔是指望不上了。

2。既然是組件，那就是css來(lái)控制的。又去看一下css中的scroll的介紹，有大概如下的屬性：參考鏈接。

上圖位置<1>:-webkit-scrollbar 滾動(dòng)條整體部分。

上圖位置<2>:-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕，允許通過(guò)點(diǎn)擊微調(diào)小方塊的位置。

上圖位置<3>:-webkit-scrollbar-corner 邊角，即兩個(gè)滾動(dòng)條的交匯處。

上圖位置<4>:-webkit-scrollbar-thumb 滾動(dòng)條里面的小方塊，能向上向下移動(dòng)（或往左往右移動(dòng)，取決于是垂直滾動(dòng)條還是水平滾動(dòng)條）。

上圖位置<5>:-webkit-scrollbar-track 滾動(dòng)條的軌道（里面裝有thumb）。

上圖位置<6>:-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去）。

不過(guò)也可以直接在小程序里看：

3。上面是正常css里的用法，用在小程序里該怎么用呢？一樣，在wxss中寫(xiě)。

如：隱藏滑動(dòng)條：

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

或者DIY：

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

以上寫(xiě)法在android及開(kāi)發(fā)工具上效果是一致的，如下圖：

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

找了半天，終于知道為什么橫向的滾動(dòng)條隱藏了，而沒(méi)有辦法弄出來(lái)！看這里。

原內(nèi)容是：

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

最近在對(duì)小程序進(jìn)行一些優(yōu)化，發(fā)現(xiàn) scroll-view 的兩處問(wèn)題

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

<scroll-view scroll-y="true" style="height:100%">
</scroll-view>

2、IOS手機(jī)下scroll-view會(huì)存在點(diǎn)擊不觸發(fā) navigator-hover 里的css
沒(méi)有找到什么好的解決辦法，故只有用view替代了scroll-view

到此這篇關(guān)于微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序scroll-view滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: