微信小程序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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
学习jQuey中的return false
Dec 18 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
JS 数组随机洗牌的实例代码
Sep 12 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python变量命名的7条建议
2019/07/04 Python
python随机数分布random均匀分布实例
2019/11/27 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
win10安装python3.6的常见问题
2020/07/01 Python
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
灵泰克Java笔试题
2016/01/09 面试题
料理师求职信
2014/01/30 职场文书
起诉书范文
2015/05/20 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android