微信小程序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 相关文章推荐
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
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
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php数据访问之查询关键字
2016/05/09 PHP
php链式操作的实现方式分析
2019/08/12 PHP
jQuery 使用个人心得
2009/02/26 Javascript
Js四则运算函数代码
2012/07/21 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python测试模块doctest使用解析
2019/08/10 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Python装饰器用法与知识点小结
2020/03/09 Python
详解Python 函数参数的拆解
2020/09/02 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
2013年军训通讯稿
2014/02/05 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python