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

news2024/10/5 11:19:20

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

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

再根据文档实现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,但是还不够,应该height:100%是相对于直接父元素的,但是父元素(也就是Page)也不知道自己多高,所以还需要在wxss里设置高度:

wxss:

page {
  height: 100%;
}

运行看看效果:

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nacos使用(下):SpringBoot和SpringCloud项目中使用Nacos

Nacos使用(上)&#xff1a;Nacos安装 Nacos使用(中)&#xff1a;Java项目和Spring项目使用Nacos Nacos使用(下):SpringBoot和SpringCloud项目中使用Nacos 3.3 SpringBoot SDK 父工程指定springboot版本&#xff1a; <dependencyManagement><dependencies><depe…

AI:05 - 基于深度学习的道路交通信号灯的检测与识别

随着人工智能的快速发展,基于深度学习的视觉算法在道路交通领域中起到了重要作用。本文将探讨如何利用深度学习技术实现道路交通信号灯的检测与识别,通过多处代码实例展示技术深度。 道路交通信号灯是指示交通参与者行驶和停止的重要信号。准确地检测和识别交通信号灯对于智…

【MySQL】JDBC

目录 1.JDBC 2.Java代码操作MySQL 2.1前置条件 2.2常用操作 2.2.1插入 2.2.2删除 2.2.3查询 1.JDBC 概念&#xff1a;JDBC&#xff0c;即Java Database Connectivity( java数据库连接 )。是一种用于执行SQL语句的Java API&#xff0c;它是Java中的数据库连接规范。这个A…

2611B数字源表

Keithley 2611B源表使精密DC、脉冲和低频交流源测量测试比以前更快、更容易、更经济。吉时利2611B的I-V功能测试速度是竞争产品的2到4倍&#xff0c;它结合了: 吉时利的高速第三代源测量单元(SMU)设计嵌入式测试脚本处理器(TSP)TSP-Link&#xff0c;一种快速触发和单元间通信总…

1775_树莓派3B键盘映射错误解决

全部学习汇总&#xff1a; GitHub - GreyZhang/little_bits_of_raspberry_pi: my hacking trip about raspberry pi. 入手树莓派3B之后用了没有多长时间&#xff0c;最初的这段时间感觉想让它代替我的PC机是不肯能的。性能先不说&#xff0c;我完全没有找到当初在我的笔记本上使…

java基础-----第三篇

系列文章目录 文章目录 系列文章目录前言一、final二、String、StringBuffer、StringBuilder前言 一、final 最终的 修饰类:表示类不可被继承 修饰方法:表示方法不可被子类覆盖,但是可以重载 修饰变量:表示变量一旦被赋值就不可以更改它的值。 (1)修饰成员变量 如果fina…

【Go 基础篇】Go语言结构体实例的创建详解

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;允许我们定义自己的复杂数据结构。通过结构体&#xff0c;我们可以将不同类型的数据字段组合成一个单一的实例&#xff0c;从而更好地组织和管理数据。然而&#xff0c;在创建结构体实例时&#xff0c;有一些注意…

用深度强化学习来玩Flappy Bird

目录 演示视频 核心代码 演示视频 用深度强化学习来玩Flappy Bird 核心代码 import torch.nn as nnclass DeepQNetwork(nn.Module):def __init__(self):super(DeepQNetwork, self).__init__()self.conv1 nn.Sequential(nn.Conv2d(4, 32, kernel_size8, stride4), nn.ReLU(inp…

java八股文面试[数据库]——MySql聚簇索引和非聚簇索引区别

聚集索引和非聚集索引 聚集索引和非聚集索引的根本区别是表记录的排列顺序和与索引的排列顺序是否一致。 1、聚集索引 聚集索引表记录的排列顺序和索引的排列顺序一致&#xff08;以InnoDB聚集索引的主键索引来说&#xff0c;叶子节点中存储的就是行数据&#xff0c;行数据在…

【Go 基础篇】Go语言结构体之间的转换与映射

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;用于定义和组织不同类型的数据字段。当我们处理复杂的数据逻辑时&#xff0c;常常需要在不同的结构体之间进行转换和映射&#xff0c;以便实现数据的转移和处理。本文将深入探讨Go语言中结构体之间的转换和映射技…

Folx 5适用Mac的BT客户端下载器

Mac 上免费的网络下载管理器Folx Mac 下载器有一个支持 Retina 显示的现代界面。提供独特的系统排序、存储下载内容与预览下载文件。Folx 是具有真正 Mac 风格界面的 macOS 免费下载管理器。它提供了方便的下载管理,灵活的设置等。Folx 专业版是 Mac 上一个出色的种子下载器&am…

Solidity 小白教程:4. 函数输出 return

Solidity 小白教程&#xff1a;4. 函数输出 return 这一讲&#xff0c;我们将介绍Solidity函数输出&#xff0c;包括&#xff1a;返回多种变量&#xff0c;命名式返回&#xff0c;以及利用解构式赋值读取全部和部分返回值。 返回值 return 和 returns Solidity有两个关键字与…

1773_把vim的tab键设置为4个空格显示

全部学习汇总&#xff1a; GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 有时候自己觉得自己很奇怪&#xff0c;看着Linux的命令窗口就觉得很顺眼。那些花花绿绿的字符以及繁多的方便命令工具&#xff0c;确实是比Windows强不少。不过&a…

电脑前置耳机没声音怎么办

有很多小伙伴反映在将自己的耳机连接到主机前面时没有声音&#xff0c;这是怎么回事呢&#xff0c;遇到这种情况应该怎么解决呢&#xff0c;下面小编就给大家详细介绍一下电脑前置耳机没声音的解决方法&#xff0c;有需要的小伙伴可以来看一看电脑前面耳机没声音。 解决方法&a…

SpringCloud(十)——ElasticSearch简单了解(三)数据聚合和自动补全

文章目录 1. 数据聚合1.1 聚合介绍1.2 Bucket 聚合1.3 Metrics 聚合1.4 使用 RestClient 进行聚合 2. 自动补全2.1 安装补全包2.2 自定义分词器2.3 自动补全查询2.4 拼音自动补全查询2.5 RestClient 实现自动补全2.5.1 建立索引2.5.2 修改数据定义2.5.3 补全查询2.5.4 解析结果…

Web安全——信息收集上篇

Web安全 一、信息收集简介二、信息收集的分类三、常见的方法四、在线whois查询在线网站备案查询 五、查询绿盟的whois信息六、收集子域名1、子域名作用2、常用方式3、域名的类型3.1 A (Address) 记录&#xff1a;3.2 别名(CNAME)记录&#xff1a;3.3 如何检测CNAME记录&#xf…

yolov5自定义模型训练二

前期准备好了用于训练识别是否有火灾的数据集后就可以开始修改yolo相关文件来进行训练 数据集放到yolov5目录里 在data目录下新建yaml文件设置数据集信息如下 在model文件夹下新增新的model文件 开始训练 训练出错 确认后是对训练数据集文件夹里的文件名字有要求&#xff0c;原…

YOLO目标检测——人脸数据集下载分享

目标检测人脸数据集在人脸识别、监控和安防、社交媒体、情感分析、医疗诊断等多个领域都具有广泛的应用潜力。 数据集点击下载&#xff1a;YOLO人脸数据集7000图片.rar

Shell 脚本入门

目录 一、Shell是什么 1.1 我们为什么要学习Shell和使用Shell&#xff1f; 1.2 Shell的分类有哪些&#xff1f; 二、Shell脚本入门知识 2.1 Shell文件命名规范 2.2 Shell解析器 2.3 用Shell 编写hello World 三、Shell的四种变量类型 3.1 系统预定义变量 3.2 自定义变…

移动端几种适配方式

移动端几种适配方式 第一种&#xff1a;rem <meta name"viewport" content"widthdevice-width, initial-scale1.0,,maximum-scale1,user-scalableno">设置窗口不能缩放 一般设备宽度的十分之一 如果这个值是动态计算的需要使用js去设置 根据设备…