当前位置: 首页 > 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

http://www.lryc.cn/news/22680.html

相关文章:

  • PowerCommand康明斯发电机控制屏维修HMI211
  • ELK + Kafka 测试
  • 迁移系统:换电脑或者硬盘转移磁盘文件的方法!
  • 职场性别报告,男女薪酬仍有差距,男性平均薪酬比女性高29.7%
  • 5-Azidopentanoic acid,79583-98-5,5-Azidopentanoic COOH具有高效稳定,高特异性
  • 滴滴前端高频react面试题汇总
  • 能在软路由docker给部署搭建teamsperk服务器么?并且设置好ddns
  • 应用统计学实验1-蒙特卡罗方法求解定积分
  • 用Pyhon编写一个属于自己的nmap
  • 电信网上用户资管理系统的设计与实现
  • js函数柯里化-面试手写版
  • 【学习笔记】深入理解JVM之类加载机制
  • 驾驭云端之风1——Spring Cloud微服务架构实践指南
  • 【计算机网络基础】
  • grep与nm命令的应用
  • 【linux】软硬链接
  • 骨传导蓝牙耳机排行,盘点几款性能不错的骨传导耳机
  • ARM中的寄存器
  • git操作修改历史版本指定tag标签的代码,并发布新标签
  • SpringMVC——响应处理(1)【包含源码分析】
  • Normalization
  • 27K测试老鸟分享自己6年面试心得,四种公司、四种问题…
  • 中小企业数字化自动化转型的方法
  • 利用GPT-3 Fine-tunes训练专属语言模型
  • kubeadm方式安装k8s高可用集群(版本1.26x)
  • 分享5款堪称神器的免费软件,建议先收藏再下载
  • 【项目实战】从0开始入门JDK源码 - LinkedList源码
  • Polygon zkEVM的gas定价
  • stl中的智能指针类详解
  • Linux 阻塞和非阻塞 IO 实验