微信小程序滚动视图的滚动条设置实现

　　

小程序的滚动视图用的比较多了,列表页一般也没管它的滚动条,最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢,ios上直接就不显示啊,也是没谁了。深入想了一下,这滚动条能不能换一颜色或者换个样式。有这冲动就立马着手改。

　　

1。直接打开官方演示,仔细看了一遍官方文档,没有任何说明,这是官方文档的一贯作风。没有一个属性是去控制显示/隐藏滚动条,更别说这样式,所以文档是指望不上了。

　　

2。既然是组件,那就是css来控制的。又去看一下css中的滚动的介绍,有大概如下的属性:参考链接。

　　

微信小程序滚动视图的滚动条设置实现“> <br/> 　　</p> 　　<p>上图位置& lt; 1祝辞:-webkit-scrollbar滚动条整体部分。</p> 　　<p>上图位置& lt; 2祝辞:-webkit-scrollbar-button滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。<br/> 　　</p> 　　<p>上图位置& lt; 3祝辞:-webkit-scrollbar-corner边角,即两个滚动条的交汇处。<br/> 　　</p> 　　<p>上图位置& lt; 4祝辞:-webkit-scrollbar-thumb ,滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)。<br/> 　　</p> 　　<p>上图位置& lt; 5祝辞:-webkit-scrollbar-track ,滚动条的轨道(里面装有拇指)。</p> 　　<p>上图位置& lt; 6祝辞:-webkit-scrollbar-track-piece内层轨道,滚动条中间部分(除去)。</p> 　　<p>不过也可以直接在小程序里看:</p> 　　<p> <img src= 　　::-webkit-scrollbar 　　{ 　　宽度:0; 　　高度:0; 　　颜色:透明; 　　} 　　 　　

或者DIY:

　　 　　/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar 　　{ 　　宽度:6 px; 　　身高:6 px; 　　background - color: # ffffff; 　　}/*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track 　　{ 　　-webkit-box-shadow:插图0 0 10 px rgba (0, 0, 0, 0.3); 　　border - radius: 10 px; 　　背景颜色:黄色; 　　}/*定义滑块内阴影+圆角*/::-webkit-scrollbar-thumb 　　{ 　　border - radius: 10 px; 　　-webkit-box-shadow:插图0 0 10 px rgba (0, 0, 0, 0。3); 　　background - color: # ff5500; 　　} 　　之前 　　 　　

以上写法在android及开发工具上效果是一致的,如下图:

　　

微信小程序滚动视图的滚动条设置实现“> <br/> 　　</p> 　　<p> 4。本以为已经大功告成,拿出我的小6扫一下预览,嘴上笑嘻嘻,心里MMP。呵呵!继续想办法! </p> 　　<p>找了半天,终于知道为什么横向的滚动条隐藏了,而没有办法弄出来!看这里。</p> 　　<p>原内容是:</p> 　　<p> <img src= 　　& lt;滚动视图scroll-y=" true "比; 　　& lt;/scroll-view> 　　 　　

2, IOS手机下滚动视图会存在点击不触发navigator-hover里的css
　　没有找到什么好的解决办法,故只有用视图替代了滚动视图
　　

　　

到此这篇关于微信小程序滚动视图的滚动条设置实现的文章就介绍到这了,更多相关小程序滚动视图滚动条内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

微信小程序滚动视图的滚动条设置实现