您好,登錄后才能下訂單哦!
原因
原來(lái)在app.wxss中定義了如下的內(nèi)容【不知道是不是新建項(xiàng)目自動(dòng)生成的,這里也就提供了隱藏滾動(dòng)條的思路啦】
::-webkit-scrollbar { width: 0px; height: 0px; color:#transparent; }
what, 寬高為0,而且還是透明的,難怪,好吧,修改寬高4px,color設(shè)置為green,以為可以了,呵呵,太年輕。
scroll-viwe依然沒(méi)有滾動(dòng)條,以為是布局原因,導(dǎo)致滾動(dòng)條消失在界面外,我將寬高設(shè)為20px,想想也是搞笑,設(shè)這么寬,但是,正是這種傻勁,再運(yùn)行,發(fā)現(xiàn)右邊寬出了好多,然而還是沒(méi)有滾動(dòng)條,懂了,肯定還有其他設(shè)置,果不其然……
解決
一通搗騰,原來(lái),除了設(shè)置::-webkit-scrollbar,還需要設(shè)置::-webkit-scrollbar-track,這是設(shè)置滾動(dòng)的軌道,::-webkit-scrollbar-thumb,這是設(shè)置滾動(dòng)條的。
所以完整的設(shè)置如下(在app.wxss中,這樣所有的scroll-view都有了,如果需要單獨(dú)設(shè)置樣式,可在單獨(dú)page的wxss中設(shè)置)
::-webkit-scrollbar { width: 4px; height: 4px; color:#ffffff; } /*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border-radius: 10px; background-color:#FFFFFF; } /*定義滑塊 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color:#39b54a; }
好了,看看效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。