使用uniapp ios端padding-top会遮盖固定定位的原因

最新推荐文章于 2023-09-20 16:25:27 发布
最新推荐文章于 2023-09-20 16:25:27 发布
阅读量1k 收藏
点赞数
分类专栏： 项目经历 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36238778/article/details/105486835
版权

最近在用uniapp做一个公司的移动端官网，无意间发现一个bug：
当页面设置为min-heigh： 100%时，为页面添加padding-top，再用position：fixed固定定位固定头部导航栏，发现顶部导航栏内容被遮盖，但是padding-top的白色背景还在。
解决办法：给导航栏的兄弟元素加margin-top
积累工作中的点滴，将来必成大器！

孩行者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uni实现路过导航导航固定到顶部点击导航栏内容滚动到本页面对应位置
qwe19991123的博客
12-02 556
我导航是图片 <view class="navWrap" ref="nav"> <view class="nav"> <image @click="navTitle(1)" class="eduImg" src="../../static/1212/eduImg.png" mode=""></image> <image @click="navTitle(2)" class="firstOrderTitleIm
uniapp 电商项目模版--mix-mall.zip
11-01
uniapp是一个多端开发框架，它允许开发者用一种语言编写代码，然后编译到包括iOS、Android、H5等多个平台。mix-mall模板则是专为电商场景定制，包含商品展示、购物车、订单处理等核心功能。 【标签】虽然没有具体的...
uniapp顶部导航栏被遮住显示问题
红烧咸咸鱼
06-29 2453
uniapp顶部导航栏被遮住显示问题
uniapp 自定义顶部导航栏后导致页面顶部被遮挡
weixin_61945023的博客
03-29 1509
uniapp 自定义顶部导航栏后导致页面顶部被遮挡
前端uniapp自定义tabbar，在iPoneX上，tabbar有个盒子用了绝对定位position: absolute被遮住问题，env(safe-area-inset-bottom)无效
FUFCY的博客
06-08 1400
env(safe-area-inset-bottom)无效
uni-app踩坑H5移动端踩坑---fixed的button按钮被popup遮挡
TATOQOQ的博客
05-31 743
问题： H5页面开发完，在pc端移动页面测试没有问题，但ios手机上弹出层把button盖住了。 解决方法： 把遮罩层popup等弹出界面的代码放到了代码最后。
uniapp打包成apk ---完整解压资源sdk
02-11
uniapp是一款基于Vue.js开发的多端统一框架，它允许开发者用一套代码实现跨平台应用开发，包括iOS、Android、H5以及小程序等。在将uniapp项目打包成APK时，涉及到的关键步骤和资源处理是本话题的重点。 【描述】...
uniapp +上传文件+安卓、ios文件选择
最新发布
12-22
在开发跨平台应用时，uniapp是一个非常受欢迎的框架，它允许开发者用一套代码同时构建Android、iOS和Web应用。本教程将详细讲解如何在uniapp中实现文件上传功能，特别是针对Android和iOS设备，以及如何处理不同类型...
uni-app 支持多端第三方地图定位的方法
10-15
在本文中，我们将深入探讨如何在uni-app框架中实现多端第三方地图定位的功能。uni-app是一个跨平台的前端框架，允许开发者编写一次代码，应用于多种平台，如iOS、Android、H5、微信小程序等。在涉及到地图定位时，...
关于z-index 层级显示 ios端不生效问题。
01-03
项目构建 webpack + vue + vue-router + vueX + axios + antd of vue 起因 构建项目的时候由于 采用的 antd of vue ui库 ，里面没有类似点击唤醒遮罩层的组件 ，所以自己手写vue组件进行引入 ，主要用的是 css3 z-...
uniapp开发h5页面点击输入框会把底部fixed定位按钮弹起
zhuqiang1997的博客
06-09 1287
解决方法：去除按钮的绝对定位，将输入框的高度固定 将获取的屏幕高度减去红线输入框距离顶部的高度再减去底部按钮的高度就是红线范围的固定高度，减15是按钮底部留白 在红线dom元素上赋值计算之后的高度，这里需要注意，单位为px，使用rpx可能不同机型底部按钮留白部分不一致 ...
uniapp解决scroll滑动之后被u-sticky挡住的问题
peepeeman的博客
09-20 1010
问题：页面触底加载之后，回到头部，顶部数据被遮挡。
IOS margin-bottom，margin-top失效问题
m0_50015961的博客
12-10 972
问题 webAPP中内嵌的H5页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone中无论嵌套多少层margin-bottom，均会失效。 原因 参考资料 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins
uni-app小程序滑动到顶部固定
wendyNo的博客
04-26 1456
<view class="performance-type-lists" :class="className"> <view> <view>简介</view> <view></view> </view> <view> <view>须知</view> <view></view> </view> <view> &lt
uniApp image标签引入图片想要偏移不要用padding 会出现 图重影问题 最好换成margin
qq_39598092的博客
11-04 1493
uniapp 小程序组件input输入框加padding，苹果手机点击padding不调起键盘
qq_42859450的博客
07-08 1075
给input设置高度
uni-app 页面滑动距离后出现回到顶部按钮，回到顶部
前端小王子
12-13 7462
html <view class="top" :style="{'display':(flag===true? 'block':'none')}"> <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons> </view> js data...
uniapp 固定区域滚动
qq_37550440的博客
04-26 2054
<template> <view class="home"> <navbar></navbar> // 固定定位的盒子 <tab :tabList='tabList' @tab='tab'></tab> // height:45px的 <view class="scroll"> <scroll-view class="list_scroll" scroll-y="true" > &.
开发中遇到移动端和uni-app右边的内边距不生效情况解决
路虽远行则将至，事虽难做则必成。
06-08 1021
是因为不是盒子模型所以右边的内边距不会生效，把它设置成盒子模型问题就解决了。
uniapp wx-open-launch-app
12-17
uniapp是一个基于Vue.js开发的跨平台应用程序开发框架，可以同时开发iOS和Android应用。wx-open-launch-app是uniapp的一个功能模块，可以实现在微信小程序中打开原生App应用的功能。通过调用wx.openLaunchApp接口，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值