微信小程序scroll-view隐藏滚动条参数不生效问题

如题,先来看看问题是怎么出现的。

先看文档如何隐藏滚动条:

再根据文档实现wxml文件:

<scroll-view show-scrollbar="{{false}}" enhanced><view wx:for="{{1000}}">11111</view>
</scroll-view>

这个代码会创建有1000行的scroll-view,然后通过show-scrollbar隐藏了滚动条,如果不出意外应该效果和预料的一致,但是呢,滚动条还是存在,如图:

然后你肯定疑问很多,微信小程序官方文档是这样写的啊,为什么还是显示了滚动条呢?

其实问题很简单,那就是这个滚动条不是scroll-view显示的,那又是哪里来的呢,答案当然是:来自Page,导致这个问题的原因有两个

1.因为scroll-view默认是不可滚动的;

2.Page自带滚动效果,所以在scroll-view不可滚动时会调用Page的滚动,所以滚动条是Page显示的,也正是这个原因,让开发者以为自己使用scroll-view正确了。

不信?那先来看看scroll-view的正确使用方式:

wxml:

<scroll-view style="height: 100%;" scroll-y show-scrollbar="{{false}}" enhanced ><view wx:for="{{1000}}">11111</view>
</scroll-view>

没错,就是多了两段 style="height: 100%;"和scroll-y,也就是说要正确使用scrollView必须要设置高度和启用scroll-y,缺一不可,但是还不够,因为height:100%是相对于直接父元素的,但是父元素(也就是Page)也不知道自己多高,所以还需要在wxss里设置高度:

wxss:

page {height: 100%;
}

运行看看效果:

综合以上结论,要实现隐藏scroll-view滚动条,有一个必要条件:

需要让scroll-view本身可以滚动,这时候滚动效果才不会被Page接管;

再贴个代码片段,使用微信开发者工具可以导入:https://developers.weixin.qq.com/s/p11QlSmo7vKci

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/91753.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现基于栈的表达式求值计算器(难度4/10)

本作业主要考察&#xff1a;解释器模式的实现思想/栈结构在表达式求值方面的绝对优势 C数据结构与算法夯实基础作业列表 通过栈的应用&#xff0c;理解特定领域设计的关键作用&#xff0c;给大家眼前一亮的感觉。深刻理解计算机语言和人类语言完美结合的杰作。是作业中的上等…

linux免密登录报错 Bad owner or permissions on /etc/ssh/ssh_config.d/05-redhat.conf

问题&#xff1a;权限不对的 解决&#xff1a; 1.检查文件的所有者和权限。 确保文件的所有者是正确的。 运行以下命令来确定文件的所有者和权限&#xff1a; ls -l /etc/ssh/ssh_config.d/05-redhat.conf 通常情况下&#xff0c;SSH配置文件应该属于root用户。如果所有者不是…

【Leetcode】130.被围绕的区域

一、题目 1、题目描述 给你一个 m x n 的矩阵 board ,由若干字符 X 和 O ,找到所有被 X 围绕的区域,并将这些区域里所有的 O 用 X 填充。 示例1: 输入:board = [[“X”,“X”,“X”,“X”],[“X”,“O”,“O”,“X”],[“X”,“X”,“O”,“X”],[“X”,“O”,“X”,“…

任意文件读取

文章目录 渗透测试漏洞原理任意文件读取1. 任意文件读取概述1.1 漏洞成因1.2 漏洞危害1.3 漏洞分类1.4 任意文件读取1.4.1 文件读取1.4.2 任意文件读取1.4.3 权限问题 1.5 任意文件下载1.5.1 一般情况1.5.2 PHP实现1.5.3 任意文件下载 2. 任意文件读取攻防2.1 路径过滤2.1.1 过…

react里map嵌套

1、tab是我自己声明的变量&#xff0c;item是下标&#xff0c;index是key值&#xff08;这些都可以改为自己的数据&#xff09; tab是声明的所有数据&#xff0c;而list是所有数据里面所需要的那一个&#xff0c;items和indexs可以虽然写一个名称代替

Java 面试 - Redis

Redis Redis 是基于键值对的非关系型数据库。Redis 拥有string、hash、list、set、zset等多种数据结构, redis具有惊人的读写性能, 其优秀的持久化机制是的它在断电和机械故障时也不会发生数据丢失, 可以用于热点数据存放, 还提供了键过期、发布订阅、食物、流水线、LUA脚本等多…

Android样本Repack重打包检测思路

1. 什么是Android样本重打包&#xff0c;为什么要检测重打包 &#xff08;1&#xff09;apk是zip&#xff0c;很容易做repack &#xff08;2&#xff09;repack后&#xff0c;被抄袭&#xff0c;redirect ad&#xff0c;或者插入malicious payloads &#xff08;3&#xff09;…

计算机网络 | TCP 三次握手四次挥手 |半关闭连接

本来是不愿意写的&#xff0c;可是在实际场景&#xff0c;对具体的描述标志还是模糊不清&#xff0c;基础不扎实&#xff0c;就得承认&#xff01;&#xff01;&#xff01; TCP 连接建立需要解决三大问题&#xff1a; 知道双方存在约定一些参数&#xff0c;如最大滑动窗口值、…

Java版电子招投标管理系统源码-电子招投标认证服务平台-权威认证

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及…

JavaScript Web APIs-01学习

复习&#xff1a; splice() 方法用于添加或删除数组中的元素。 **注意&#xff1a;**这种方法会改变原始数组。 删除数组&#xff1a; splice(起始位置&#xff0c; 删除的个数) 比如&#xff1a;1 let arr [red, green, blue] arr.splice(1,1) // 删除green元素 consol…

Java中转换流(InputStreamReader,OutputStreamWriter),打印流(PrintStream,PrintWriter)

转换流 InputStreamReader 和 OutputStreamWriter 是 Java 中用于字符流和字节流之间进行转换的转换流类。它们主要用于解决字符编码的问题&#xff0c;在字节流和字符流之间提供了桥梁&#xff0c;可以将字节流转换为字符流或将字符流转换为字节流。 InputStreamReader&#…

深度探索JavaScript中的原型链机制

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…