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

news/2024/7/20 1:00:48 标签: 小程序, javascript, 前端

修改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


http://www.niftyadmin.cn/n/103838.html

相关文章

vue前端架构说明书模板示例

目录 1. 技术说明... 2 1.1 版本明细... 2 1.2 核心技术介绍... 2 2. 项目结构说明... 3 3. 自动化部署设置说明... 5 4. 打包及运行说明... 5 5. 导包说明... 6 5.1 方案一... 6 5.2 方案二... 7 5.3 补充说明... 7 6. 修改本地运行时链接的服务器说明... 7 7. 常…

Android 获取手机语言环境 区分简体和繁体,香港,澳门,台湾繁体

安卓和IOS 系统语言都是准守:ISO 639 ISO 代码表IOS:plus.os.language ios正常,安卓下简体和繁体语言,都是zh安卓获取系统语言方法:Locale.getDefault().language手机切换到繁体(台湾,香港&…

taobao.fulfillment.order.assemble( 拆合单结果回传接口 )

¥免费必须用户授权 拆合单结果回传接口 公共参数 请求地址: HTTP地址 http://gw.api.taobao.com/router/rest 公共请求参数: 公共响应参数: 请求参数 响应参数 点击获取key和secret 请求示例 TaobaoClient client new DefaultTaobaoClient(url, appkey, secr…

python包管理命令pip使用教程

python包管理命令pip使用教程前言1. 下载包2. 卸载包3. 查看包4. 查看指定的包5. 更新包6. pip更新前言 python中的python包管理是使用pip来进行管理的,其中视频教程如下所示: bilibili 1. 下载包 pip install 包名 pip install 包名 (-i 镜…

使用非对称加密(RSA) 实现前端加密后端解密

数据加密方式有: 单向加密、对称加密、非对称加密、加密盐、散列函数、数字签名。 1、单向加密 单向加密通过对数据进行摘要计算生成密文,密文不可逆推还原。只能加密,不能解密,常用于提取数据的指纹信息以此来验证数据的完整性…

Qt——自定义Model

众所周知,Qt提供了一套Model/View框架供开发者使用,Model用来提供数据, View则用来提供视觉层的显示。实际上这是一套遵循MVC设计模式的GUI框架,因为Qt还提供了默认的Delegate作为Controller来作为控制器。 MVC的好处这里就不多说…

Vue3+vite,vue3基本使用文档

文章目录1. vite2. 创建vue3.x项目2.1 使用vite创建的项目2.2 使用vue-cli创建vue3.x项目3. vue3.x 基本使用3.1 响应式基础3.1.1 reactive() 方法3.1.2 ref() 方法3.2 script setup3.3 响应性语法糖3. vue3和vue2不同之处3.1 启动方式不同3.2 全局挂载方式不同3.3 根节点有所改…

机器学习概述

机器学习是人工智能的核心研究领域之一,其研究动机是为了让计算机系统具有人的学习能力以便实现人工智能。目前被广泛采用的机器学习的定义是“利用经验来改善计算机系统自身的性能”。由于“经验在计算机系统中主要是以数据的形式存在的,因此机器学习需…