微信小程序 scroll-view的滚动条设置

原创 2018年04月16日 16:13:48

小程序的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就别瞎折腾了,想要效果,那就自定义了!





版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32067045/article/details/79958540

微信小程序-scroll-view滚动到索引位置(二)

有一些重要的关键点请看上一篇文章 微信小程序-scroll-view滚动到指定位置(一) 主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可 话不多说...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016-12-21 17:36:15
  • 14400

微信小程序滚动到某个位置改变效果

Some of the words 200 ? 'class1' : 'class2'}}" //JS文件 //滚动监听 scroll: function (e) { this.setDa...
  • kajweb
  • kajweb
  • 2017-05-08 21:23:40
  • 8572

页面滚动到指定的位置

1.设置坐标,使页面滚动到指定的坐标WebDriver driver = new FirefoxDriver(); driver.get("http://www.nytimes.com/"); ...
  • a812919698
  • a812919698
  • 2016-08-10 15:42:31
  • 285

微信小程序-scroll-view滚动到指定位置(一)

先来说一下官网例子吧 API 自己看咯  https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=2016112...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016-12-21 16:16:48
  • 22029

小程序scroll-view区域滚动到最底部

需求:用到这个需求的地方是在做一个对话页面,scroll-view区域要显示到最新的信息,也就是滚动到最底部。思路:绑定scroll-view的scroll-top属性,在每次监听到事件或者webso...
  • aydongzhiping
  • aydongzhiping
  • 2018-04-17 16:47:51
  • 19

微信小程序 scroll-view滚动到索引位置

有一些重要的关键点请看上一篇文章微信小程序-scroll-view滚动到指定位置(一)主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可话不多说,看代码wx...
  • yelin042
  • yelin042
  • 2018-01-18 19:04:12
  • 280

小程序制作回到顶部按钮

我们先看一下效果吧,直接上图。第一种情况,当页面在顶部的时候,回到顶部按钮是不会出现的。第二种情况,当页面在离开顶部一定距离的时候,回到顶部按钮出现接下就是对代码的分析了: 在这里我们如果要...
  • qq_24147051
  • qq_24147051
  • 2017-01-08 14:12:07
  • 9534

微信小程序scroll-view隐藏滚动条方法

在wxss里加入以下代码:::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}
  • NAMECZ
  • NAMECZ
  • 2018-01-19 17:52:42
  • 780

微信小程序-横向滑动scroll-view隐藏滚动条

微信小程序-横向滑动scroll-view隐藏滚动条
  • qq_24734285
  • qq_24734285
  • 2016-12-28 19:53:04
  • 22013

微信小程序把玩(九)scroll-view组件

scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要...
  • u014360817
  • u014360817
  • 2016-09-25 10:36:41
  • 51364
收藏助手
不良信息举报
您举报文章:微信小程序 scroll-view的滚动条设置
举报原因:
原因补充:

(最多只允许输入30个字)