微信小程序 SCROLL-VIEW的滚动条设置

2023-10-27

小程序的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://www.freesion.com/article/3825363653/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序 SCROLL-VIEW的滚动条设置 的相关文章

  • 你真的了解websocket吗?(websock原理详解)

    什么是websocket WebSocket是在2008年6月诞生 2011年由IEFT标准化为RFC 6455 WebSocket是一种在单个TCP连接上进行全双工通信的协议 使得客户端和服务器之间的数据交换变得更加简单 并允许服务端主动
  • android 网络请求参数排序

    在网络开发过程中客户端跟服务器经常遇到各种各样的验证方式 参数排序就是常见的方法之一 按照参数的首字母升序或者降序 参数少的话可以主观的排序就行了 但是参数多的时候肯定不能这么干了 下面介绍几个方法 0 以Key进行排序 第一种 直接声明T
  • 【uniapp】scroll-view 实现自动滚动到最底部

    在做uniapp项目中 有个滚动视图组件scroll view 跟微信小程序里的组件一样的 想要实现自动滚动到最底部 是一件容易忽略的 小事情 文章目录 问题呈现 解决方案 注意事项 问题呈现 官网uniapp文档上说可以控制滚动条 并没有
  • 基于STM32F103ZET6核心板控制HX711(称重传感器带屏蔽)

    目的 使用核心板控制传感器 实现串口打印数据 硬件要求 1 gt stm32f103zet6核心板 2 gt HX711 带屏蔽 HX711有好几款板子 我这里使用的是带屏蔽的板子 只要知道引脚的功能什么板子都是一样的 HX711原理图 管
  • Tomcat & Servlet入门学习

    web相关概念回顾 1 软件架构 1 C S 客户端 服务器端 2 B S 浏览器 服务器端 2 资源分类 1 静态资源 所有用户访问后 得到的结果都是一样的 称为静态资源 静态资源可以直接被浏览器解析 如 html css JavaScr
  • B1094 谷歌的招聘 (20 分)

    2004 年 7 月 谷歌在硅谷的 101 号公路边竖立了一块巨大的广告牌 如下图 用于招聘 内容超级简单 就是一个以 com 结尾的网址 而前面的网址是一个 10 位素数 这个素数是自然常数 e 中最早出现的 10 位连续数字 能找出这个

随机推荐

  • Lyperledger Fabric笔记 - Ubuntu Kylin 14 部署fabric 1.4.3

    https www htcp net 3766 html 丢一连接 配环境累死个人 好的 我活着来了 终于配完了 期间几多辛酸那 预警 非教程 仅仅作个人笔记用 信息不全 报错信息也不全 只是记录一下自己踩的一些坑 第一次配置 一 系统配置
  • BlockBank六扇门社区AMA内容记录

    参与嘉宾 NOLVIA SERRANO GABRIEL HIRIS 主持人 BlockBank社区志愿者 喵喵参与嘉宾 NOLVIA SERRANO GABRIEL HIRIS 主持人 BlockBank社区志愿者 喵喵 AMA Topic
  • PyTorch笔记

    PyTorch快速入门 函数名后面带下划线 的函数会修改Tensor本身 例如 x add y 和x t 会改变 x 但x add y 和x t 返回一个新的Tensor 而x不变 Tensor和numpy对象共享内存 所以他们之间的转换很
  • Dijkstra算法-(迪杰斯特拉)算法的迭代实现与优先队列实现 图解算法过程

    Dijkstra算法 迪杰斯特拉 算法之迭代实现 Dijkstra算法 迪杰斯特拉 算法之优先队列实现 该算法的核心原理 很简单 如下图所示 先说说Dijkstra算法 迪杰斯特拉 算法之迭代实现 如下图为详细步骤 代码如下 两种实现方法都
  • 各领域逐步引入人脸识别可谓是百花齐放

    在国内 从消费领域到网络支付 安保 金融 医疗 交通等领域 都在逐步地引入人脸识别 可谓是百花齐放 而无论是地铁刷脸进站 医院刷脸就诊 还是商超刷脸结账 其实最终都离不开一个主题刷脸支付 近年来 生物识别技术的商用速度不断加快 应用范围愈发
  • blender python 不同的obj alpha设置不同 颜色 并保存

    目录 生成遮罩层 并且渲染保存 生成蓝色遮罩层并保存遮罩结果 blender 不同的obj设置不同的alpha颜色
  • 【笔记】2022 Golang+Cobra 学习Cli命令行工具

    github源代码网址 GitHub spf13 cobra A Commander for modern Go CLI interactions 一 安装 由于Cobra更新新的版本 所以网络上之前的教程都需要进行修改 例 根据老的方法进
  • C练题笔记之:Leetcode-24. 两两交换链表中的节点

    题目 给你一个链表 两两交换其中相邻的节点 并返回交换后链表的头节点 你必须在不修改节点内部的值的情况下完成本题 即 只能进行节点交换 示例 1 输入 head 1 2 3 4 输出 2 1 4 3 示例 2 输入 head 输出 示例 3
  • 作用域、生命周期 及 Request、session、application 区别

    1 request 请求作用域 对象内数据存活范围是当客户端向服务器发送一个请求 服务器向客户端返回一个响应之后 该请求对象就被销毁了 之后再次发送的请求也无法获取之前request对象存放的任何数据 request的setAttribut
  • bulk这个词的用法_bulk是什么意思

    bulk的意思 解释 过去式 bulked 过去分词 bulked 现在分词 bulking 复数形式 bulks bulk 基本解释 名词 大 体积 大块 大量 大多数 大部分 主体 及物 不及物动词变得越来越大 或重要 不及物动词显得庞
  • Java字符串的比较(equals()、equalsIgnoreCase()和compareTo())

    在 Java 中 比较字符串的常用方法有 3 个 equals 方法 equalsIgnoreCase 方法 compareTo 方法 下面详细介绍这 3 个方法的使用 equals 方法 equals 方法将逐个地比较两个字符串的每个字符
  • 国网学籍跨省转学页面不显示问题解决办法

    1 火狐浏览器登陆学籍网 跨省转学显示 未连接 有潜在的安全问题 Firefox 检测到潜在的安全威胁 并因 ksyw zxxs moe edu cn 要求安全连接而没有继续 2 点击高级 再点击查看证书 3 下载证书 4 IE浏览器登陆学
  • 2023年电气,电子与信息工程国际会议(ISEEIE 2023)

    2023年电气 电子与信息工程国际会议 ISEEIE 2023 重要信息 会议网址 www iseeie org 会议时间 2023年2月24 26日 召开地点 新加坡 截稿时间 2022年12月31日 录用通知 投稿后2周内 收录检索 E
  • 搭建portus管理docker registry私服

    本节课将介绍Docker Registry以及带UI管理的仓库管理软件Portus搭建过程和管理使用 Portus介绍 Portus by SUSE 是一个带UI管理的仓库管理软件 用于Docker Registry API V2 的开源和
  • idea中,引用不到项目中的类

    1 查看src是否为source root文件 只有该文件下的java文件才会被编译 2 IDEA中有缓存 应该是项目中的缓存 建立的索引报错了 导致不能正常引用现有的类 解决方案 清理缓存并重启
  • 使用excel估计GARCH模型参数——以GARCH(1,1)为例

    本文的知识点 使用excel求解GARCH模型的系数 以GARCH模型为例 主要采用的是极大似然估计法MLE 同时给出了R语言的输出结果作为对照验证 参考了
  • 华硕路由器(RT-AC86U)架设简易git服务器

    背景 我有多台设备 而且不同平台 在多台设备间倒腾代码 直接复制很不方便 于是有了搭一个简易家用级别的git服务器的想法 目的 解决内部不同平台间倒腾代码不方便的问题 家用级轻量解决方案 不需要高功耗服务器 软硬件准备 华硕RT AC86U
  • HDFS入门和应用开发:HDFS简介、发展历史、设计目标以及应用场景

    一 HDFS简介 HDFS Hadoop Distributed File System 是 Apache Hadoop 项目的一个子项目 它的设计初衷是为了能够支持高吞吐和超大文件读写操作 HDFS是一种能够在普通硬件上运行的分布式文件系
  • 刷脸支付不负众望站在了支付舞台的中央

    刷脸支付自宣布商用全面推广以来 便在线下不断释放积极信号 从最初的无人知晓到如今的无人不晓 刷脸支付跨越一个又一个的难关 打破一个又一个外界对它的质疑 承载着希望和荣耀 勇往直前 到了今天 刷脸支付不负众望 站在了支付舞台的中央 不断散发着
  • 微信小程序 SCROLL-VIEW的滚动条设置

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