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


Posted in Javascript onMarch 02, 2020

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

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

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

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

上图位置<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 内层轨道,滚动条中间部分(除去)。

不过也可以直接在小程序里看:

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

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及开发工具上效果是一致的,如下图:

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

4.本以为已经大功告成,拿出我的小6扫一下预览,嘴上笑嘻嘻,心里MMP。呵呵!继续想办法!

找了半天,终于知道为什么横向的滚动条隐藏了,而没有办法弄出来!看这里。

原内容是:

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

算了算了 ,ios就别瞎折腾了,想要效果,那就自定义了!

最近在对小程序进行一些优化,发现 scroll-view 的两处问题

1、IOS手机下scroll-view会存在上拉加载时卡顿情况
暂时解决方法(设置高度为100%,问题:设置后不能触发上拉触底事件):

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

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

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

Javascript 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
JS之相等操作符详解
Sep 13 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
JS如何生成随机验证码
Mar 02 #Javascript
js实现烟花特效
Mar 02 #Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 #Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 #Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 #Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 #Javascript
Vue Router的手写实现方法实现
Mar 02 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
隐性调用php程序的方法
2009/03/09 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python实现求最长回文子串长度
2018/01/22 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
10款最好的Python开发编辑器
2019/07/03 Python
python匿名函数的使用方法解析
2019/10/10 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
2013年保送生自荐信格式
2013/11/20 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
推广普通话标语
2014/06/27 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书