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

wxss:

page {height: 100%;
}

运行看看效果:

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

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

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

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

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

相关文章

pytorch异常——RuntimeError:Given groups=1, weight of size..., expected of...

文章目录 省流异常报错异常截图异常代码原因解释修正代码执行结果 省流 nn.Conv2d 需要的输入张量格式为 (batch_size, channels, height, width)&#xff0c;但您的示例输入张量 x 是 (batch_size, height, width, channels)。因此&#xff0c;需要对输入张量进行转置。 注意…

探索未知世界:桌面端3D GIS引领地理信息新时代

近年来&#xff0c;桌面端的三维地理信息系统&#xff08;3D GIS&#xff09;在地理信息领域迎来了显著的发展&#xff0c;为我们带来了更深入、更丰富的地理空间认知和数据分析体验。从城市规划到环境保护&#xff0c;从资源管理到应急响应&#xff0c;桌面端的3D GIS正逐渐成…

day 30 动态GDP柱状图绘制

列表.sort(key选择排序依据的函数&#xff0c;reverseTrue|False) 参数key:要求传入一个函数&#xff0c;表示将列表的每一个元素传入函数当中&#xff0c;返回排序的依据&#xff0c; 参数reverse,是否反转排序结果&#xff0c;True降序&#xff0c;False升序 my_list [[&…

【爬虫小知识】如何利用爬虫爬网页——python爬虫

前言 网络时代的到来&#xff0c;给我们提供了海量的信息资源&#xff0c;但是&#xff0c;想要获取这些信息&#xff0c;手动一个一个网页进行查找&#xff0c;无疑是一项繁琐且效率低下的工作。这时&#xff0c;爬虫技术的出现&#xff0c;为我们提供了一种高效的方式去获取…

Android JNI系列详解之生成指定CPU的库文件

一、前提 这次主要了解Android的cpu架构类型&#xff0c;以及在使用CMake工具的时候&#xff0c;如何指定生成哪种类型的库文件。 如上图所示&#xff0c;是我们之前使用CMake工具默认生成的四种cpu架构的动态库文件&#xff1a;arm64-v8a、armeabi-v7a、x86、x86_64&#xff0…

【附安装包】MyEclipse2019安装教程

软件下载 软件&#xff1a;MyEclipse版本&#xff1a;2019语言&#xff1a;简体中文大小&#xff1a;1.86G安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.5GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨下载链接&#xff1a;https://pan.baidu.co…

系统架构师---系统规划

目录 前言&#xff1a; 项目的提出与选择 项目立项的目标和动机 进行基础研究并获取技术 进行应用研发并获得产品 提供技术服务 信息技术产品的使用者 项目的选择和确定 选择有核心价值的产品、项目或可开发方向 评估项目风险、收益和代价 评估项目的多种实施方式 平…

app.js和页面.js 实现全局传参

实现全局传参的几个步骤&#xff1a;1. 在页面.js文件中 输入 const appgetApp() 2.便可以在页面中引用app.js中的globalData中的数据。 注意点&#xff1a;app.js中是使用的是this.globalData (调用自身的数据&#xff09; 页面.js中使用的是app.globalData&#xff08;引用ap…

国产系统下开发QT程序总结

国产系统下开发QT程序总结 1. 国产系统简介 开发国产系统客户端的过程中&#xff0c;会出现兼容性问题。以下介绍Kylin和UOS环境下开发QT程序&#xff0c; 首先麒麟和统信这两个系统基于Ubuntu开发的。所以在Ubuntu开发理论上在国产系统上也能运行。芯片架构又分为amd,arm,mi…

vue v-for 例子

vue v-for 例子 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&…

ArcGIS学习总结(19)——要素转点与空间连接(属性表字段映射)

1.在新创建的面矢量数据的属性表中没有对应的字段信息&#xff0c;为了能够和有属性信息的数据进行匹配&#xff0c;使其具有对应字段的信息。 2.需要匹配的矢量文件属性表信息。 3.对新创建的矢量文件执行要素转点&#xff1a;数据管理工具→要素→要素转点。 4.选择分析工…

AI聊天机器人平台Poe发布更新;自然语言理解课程概要

&#x1f989; AI新闻 &#x1f680; AI聊天机器人平台Poe发布更新 突破功能限制 增加企业级服务 摘要&#xff1a;知名问答网站Quora旗下的AI聊天机器人平台Poe发布了一系列更新&#xff0c;包括推出Mac应用、支持同时进行多个对话、接入Meta的Llama 2模型等功能。用户只需支…

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 自定义变…

(笔记二)利用opencv调用鼠标事件在图像上绘制图形

目录 &#xff08;1&#xff09;查看cv2所支持的鼠标事件&#xff08;2&#xff09;通过鼠标事件在图像上做标记&#xff08;3&#xff09;高级操作&#xff1a;通过移动鼠标在图像绘制图形、曲线 该功能主要创建一个鼠标事件发生时执行的回调函数。鼠标事件可以是任何与鼠标有…

【OpenCV实战】3.OpenCV颜色空间实战

OpenCV颜色空间实战 〇、Coding实战内容一、imread1.1 函数介绍1.2 Flags1.3 Code 二. 色彩空间2.1 获取单色空间2.2. HSV、YUV、RGB2.3. 不同颜色空间应用场景 〇、Coding实战内容 OpenCV imread()方法不同的flags差异性获取单色通道【R通道、G通道、B通道】HSV、YUV、RGB 一…

Prompt GPT推荐社区

大家好&#xff0c;我是荷逸&#xff0c;这次给大家带来的是我日常学习Prompt社区推荐 Snack Prompt 访问地址&#xff1a;http://snackprompt.com Snack Prompt是一个采用的Prompts诱导填空式的社区&#xff0c;它提供了一种简单的prompt修改方式&#xff0c;你只需要输入关…

MindsDB为许多不支持内置机器学习的数据库带来了机器学习功能

选择平台的首要原则是“靠近数据”,让代码靠近数据是保持低延迟的必要条件。 机器学习,特别是深度学习往往会多次遍历所有数据(遍历一次被称为一个epoch)。对于非常大的数据集来说,理想的情况是在存储数据的地方建立模型,这样就不需要大量的数据传输。目前已经有部分数据…

Doris最大链接数优化

问题背景&#xff1a; 用户在使用Doris的时候&#xff0c;当访问用户过多时会报Reach limit of connections&#xff0c;针对这种情况需要调整Doris最大连接数&#xff0c;具体做法如下。 解决办法&#xff1a; Session变量设置 SET PROPERTY FOR root max_user_connection…

蓝蓝设计ui设计公司作品案例-中节能现金流抗压测试软件交互及界面设计

中国节能是以节能环保为主业的中央企业。中国节能以生态文明建设为己任&#xff0c;长期致力于让天更蓝、山更绿、水更清&#xff0c;让生活更美好。经过多年发展&#xff0c;中国节能已构建起以节能、环保、清洁能源、健康和节能环保综合服务为主业的41产业格局&#xff0c;成…

Vue3响应式原理 私

响应式的本质&#xff1a;当数据变化后会自动执行某个函数映射到组件&#xff0c;自动触发组件的重新渲染。 响应式的实现方式就是劫持数据&#xff0c;Vue3的reactive就是通过Proxy劫持数据&#xff0c;由于劫持的是整个对象&#xff0c;所以可以检测到任何对象的修改&#xf…