当前位置: 首页 > news >正文

解决小程序页面scroll-view块自身滑动问题

修改scroll-view的style样式
本来通过函数限制高度

style="margin-top:200rpx;"height: calc(100vh - 200rpx - env(safe-area-inset-bottom));

会出现整个scroll-view块位置不固定滑动里面的内容后,自己本身在整个页面内上移,将样式改为:

style="margin-top:200rpx;top:var(--window-top); "

问题得以解决 amazing!!
去搜了下top:var(--window-top)这个东东,算是一个实现置顶的属性吧,其中--window-top这个方法是uni提供的css变量,在web页面可以直接写px,比如写80px他会在距离上边距80px的时候悬浮。
引用其他文章一段话:
为了优雅的解决多端高度定位问题,uni-app新增了2个css变量:–window-top和–window-bottom,这代表了页面的内容区域距离顶部和底部的距离。举个实例,如果你想在原生tabbar上方悬浮一个菜单,之前写bottom:0。这样的写法编译到h5后,这个菜单会和tabbar重叠,位于屏幕底部。而改为使用bottom:var(–window-bottom),则不管在app下还是在h5下,这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。
————————————————
版权声明:本文为CSDN博主「前端阿彬」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38974163/article/details/119149830

相关文章:

解决小程序页面scroll-view块自身滑动问题

修改scroll-view的style样式 本来通过函数限制高度 style"margin-top:200rpx;"height: calc(100vh - 200rpx - env(safe-area-inset-bottom));会出现整个scroll-view块位置不固定滑动里面的内容后,自己本身在整个页面内上移,将样式改为&#…...

PowerCommand康明斯发电机控制屏维修HMI211

康明斯柴油发电机的监控系统分为普通机组控制屏和智能化机组控制界面。普通操作界面实用于普通的康明斯柴油发电机的控制,康明斯柴油发电机的起动与停止、供电与断电、状态调整等均由手动操作;自动化康明斯柴油发电机控制系统适合于智能化康明斯柴油发电…...

ELK + Kafka 测试

配置file beat输出到 Kafkalogstash服务器从kafka获取数据并输出到es集群在es集群上查看索引kibana界面添加索引查看数据1.配置file beat输出到 Kafka 1.1 Filebeat机器配置数据采集和输出目标 做好域名解析 # vim /usr/local/filebeat/filebeat.yml # 修改输出目标为kafka…...

迁移系统:换电脑或者硬盘转移磁盘文件的方法!

为什么要将操作系统迁移到新驱动? “将操作系统转移到新驱动您好,我刚刚为我的台式机订购了一个新的2TB希捷Barracuda硬盘,我想知道如何将我的Windows 10操作系统与我下载的其他一些软件一起转移过来。我使用新的/大的硬盘,然…...

职场性别报告,男女薪酬仍有差距,男性平均薪酬比女性高29.7%

性别是否影响职业?女性求职比男性更加困难?男性薪酬比女性更有优势?人们一说到警察、建筑师通常会想到高大魁梧的男性形象,一说到幼师、护士往往想到的都是温柔的女性形象,职业好似与性别挂钩;女性求职通常…...

5-Azidopentanoic acid,79583-98-5,5-Azidopentanoic COOH具有高效稳定,高特异性

5-Azidopentanoic acid,5-Azidopentanoic COOH,5-叠氮基戊酸产品规格:1.CAS号:79583-98-52.分子式:C5H9N3O23.分子量:143.074.包装规格:1g,5g,10g,包装灵活&a…...

滴滴前端高频react面试题汇总

说说 React组件开发中关于作用域的常见问题。 在 EMAScript5语法规范中,关于作用域的常见问题如下。 (1)在map等方法的回调函数中,要绑定作用域this(通过bind方法)。 (2)父组件传递…...

能在软路由docker给部署搭建teamsperk服务器么?并且设置好ddns

参考链接(4条消息) 【个人学习总结】使用docker搭建Teamspeak服务器_blcurtain的博客-CSDN博客_teamspeak3 docker(⊙﹏⊙)哎呀,崩溃啦! (tdeh.top)TeamSpeak服务器搭建与使用 - 缘梦の镇 (cmsboy.cn)Openwrt X86 docker运行甜糖-软路由,x86系统,openwrt…...

应用统计学实验1-蒙特卡罗方法求解定积分

目录 1. 用蒙特卡罗方法计算定积分(随机投点法) 2. 用蒙特卡罗方法计算定积分(平均值法)...

用Pyhon编写一个属于自己的nmap

用Pyhon编写一个属于自己的nmap 文章目录用Pyhon编写一个属于自己的nmap导入 socket 模块,确定目标主机 IP 或域名以及需要扫描的端口列表开始扫描、扫描每个端口创建一个 socket 对象,用于建立 TCP 连接尝试连接目标主机的指定端口如果连接成功&#xf…...

电信网上用户资管理系统的设计与实现

技术:Java、JSP等摘要:在对目前市面上已经拥有的营业厅功能分析和整理后,为了保证营业厅中多种功能的分层次处理设计了一个的电信网上用户自管理系统,以web页面方式实现了与用户的交互,同时保证了移动电话计费管理系统…...

js函数柯里化-面试手写版

概念 用我自己的话来总结一下,函数柯里化的意思就是你可以一次传很多参数给curry函数,也可以分多次传递,curry函数每次都会返回一个函数去处理剩下的参数,一直到返回最后的结果。 实例 这里还是举几个例子来说明一下&#xff1…...

【学习笔记】深入理解JVM之类加载机制

【学习笔记】深入理解JVM之类加载机制 以后基本上都在语雀上面更新,大家有兴趣可以看看嗷! 首发地址: 知识库 文章流程图: 1、概述 首先我们先来看看一个 Class 文件所需要经过的一个流程图: 而我们今天要重点需讲的…...

驾驭云端之风1——Spring Cloud微服务架构实践指南

本博客纯属个人总结,非原创。喜欢技术交流的,可关注博主,武汉有后端开发群,可支持内推,了解武汉行情等。 前沿 优惠卷平台项目的整体功能和模块,以及每个功能点的技术选型和背后的依据。 搭建一个简化版的…...

【计算机网络基础】

计算机网络基础网络的基本概念网络互联网IP地址MAC地址网络协议网络分层模型网络应用程序的通信流程网络的基本概念 网络 网络是由若干结点和链接这些结点的链路组成,网络中的结点可以是计算机,交换机,路由器等设备 网络设备:交…...

grep与nm命令的应用

相关知识拓展 Linux中grep的命令使用 在Linux中,grep可用于shell脚本,因为grep通过返回一个状态值来说明搜索状态,如果模板搜索成功,则返回0,如果搜索不成功,则返回1,如果搜索的文件不存在&…...

【linux】软硬链接

在linux中在磁盘中定位文件并不是根据文件名而是根据文件的inode,一个文件对应一个inode但是一个inode可以对应多个文件。硬链接硬链接是通过索引节点进行的链接。在Linux中,多个文件指向同一个索引节点是允许的,像这样的链接就是硬链接。硬链…...

骨传导蓝牙耳机排行,盘点几款性能不错的骨传导耳机

随着蓝牙耳机的普及,骨传导耳机也越来越受到欢迎,很多人也都开始在了解并尝试骨传导耳机。相比于其他类型耳机,在舒适度、安全方面有一定优势。尤其是在户外运动时,或者长时间佩戴运动时,使用骨传导耳机可以避免耳朵因…...

ARM中的寄存器

ARM工作模式 ARM有8个基本的工作模式 User 非特权模式,一般在执行上层的应用程序时ARM处于该模式FIQ 当一个高优先级中断产生后ARM将进入这种模式IRQ 当一个低优先级中断产生后ARM将进入这种模式SVC 当复位或执行软中断指令后ARM将进入这种模式Abort 当产生存取异常…...

git操作修改历史版本指定tag标签的代码,并发布新标签

场景: 当项目已经迭代多个版本之后,突然发现旧版本0.0.1出现了紧急bug,需要及时处理; 如果直接用新版本替换上去是存在极大隐患的,且时间来不及; 所以需要直接在0.0.1版本的基础上去修复bug,然…...

nli-distilroberta-base在工业质检文档中的应用:SOP操作步骤与现场记录逻辑一致性核查

nli-distilroberta-base在工业质检文档中的应用:SOP操作步骤与现场记录逻辑一致性核查 1. 项目背景与价值 在工业制造领域,标准作业程序(SOP)与现场操作记录的一致性核查是质量管理的核心环节。传统人工核查方式存在效率低、主观性强、覆盖不全等问题。…...

Flux.1-Dev深海幻境作品集:LSTM时序灵感驱动的系列艺术创作

Flux.1-Dev深海幻境作品集:LSTM时序灵感驱动的系列艺术创作 最近在尝试一些AI艺术创作的新玩法,发现了一个特别有意思的组合:用LSTM模型来“读”故事,再用Flux.1-Dev模型来“画”故事。听起来有点抽象?简单说&#xf…...

从4G到RedCap:手把手教你升级老旧工业设备的无线通信模块(附功耗测试数据)

从4G到RedCap:工业设备无线通信模块升级实战指南 在工业物联网快速发展的今天,老旧设备的通信模块升级成为许多工厂面临的现实挑战。传统4G模块虽然稳定可靠,但面对5G时代RedCap技术带来的低功耗、低成本优势,升级改造已成为提升设…...

Trelby:释放创意生产力的剧本创作解决方案

Trelby:释放创意生产力的剧本创作解决方案 【免费下载链接】trelby The free, multiplatform, feature-rich screenwriting program! 项目地址: https://gitcode.com/gh_mirrors/tr/trelby 当格式规范不再成为创作的枷锁,编剧如何重获灵感自由&am…...

基于MATLAB的VSG逆变器无源性分析与稳定性研究

基于MATLAB的VSG逆变器无源性分析与稳定性研究 摘要 随着分布式发电和微电网技术的快速发展,逆变器作为新能源并网的关键接口,其稳定性问题日益突出。虚拟同步发电机(VSG)控制技术通过模拟同步发电机的机电特性,为逆变器提供惯性和阻尼支撑,成为提升系统稳定性的重要手…...

大数据产品实战:用户画像系统的设计与实现

大数据产品实战:用户画像系统的设计与实现 关键词:用户画像、标签体系、大数据平台、精准营销、数据挖掘 摘要:用户画像系统是大数据时代企业实现“以用户为中心”运营的核心工具,它通过给用户“贴标签”的方式,将复杂的用户行为转化为可量化、可分析的数字特征。本文将从…...

拒了一个只要1.8万的45岁大佬

因公众号更改推送规则,请点“在看”并加“星标”第一时间获取精彩技术分享点击关注#互联网架构师公众号,领取架构师全套资料 都在这里0、2T架构师学习资料干货分上一篇:2T架构师学习资料干货分享大家好,我是互联网架构师&#xff…...

Flutter:从零到APK,手把手教你完成Android应用签名与打包

1. 环境准备与基础概念 在开始Flutter应用打包之前,我们需要确保开发环境已经正确配置。首先确认你的电脑上已经安装了以下工具: Flutter SDK(建议最新稳定版)Android Studio(包含Android SDK)Java JDK&…...

OpenClaw技能市场巡礼:最适合Qwen3-32B的5个实用模块

OpenClaw技能市场巡礼:最适合Qwen3-32B的5个实用模块 1. 为什么需要关注技能市场? 第一次接触OpenClaw时,我以为它只是个简单的自动化脚本集合。直到在本地部署了Qwen3-32B模型后,才发现真正的威力藏在技能市场里。这里分享一个…...

ROS2 Humble下,如何用一份Xacro文件同时搞定MoveIt2配置与Gazebo仿真(附完整Launch文件)

ROS2 Humble统一建模实战:Xacro文件在MoveIt2与Gazebo中的协同设计 当机械臂的URDF文件需要同时满足MoveIt2的运动规划需求和Gazebo的物理仿真要求时,开发者往往陷入两难境地。传统方案需要维护两份模型文件——一份精简版用于MoveIt,另一份增…...