devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端uniapp自定义tabbar，在iPoneX上，tabbar有个盒子用了绝对定位position: absolute被遮住问题，env(safe-area-inset-bottom)无效_uniapp苹果absolute失效

作者：AllinToyou | 2024-02-27 12:25:45

赞

踩

uniapp苹果absolute失效

出现问题前，是因为一个盒子我用了绝对定位position: absolute，在其他机型正常，在iPoneX上就出现问题

出现问题前代码

  1. <template>
  2. 	<view class="mian">
  3. 		<view class="box">
  4. 			<view class="sao">
  5. 				<view class="icon">
  6. 					<iconfont name="scan" size="50rpx" color="#fff"></iconfont>
  7. 				</view>
  8. 				<view class="name">扫一扫</view>
  9. 			</view>
  10. 			<view class="left">
  11. 				<view class="item">
  12. 					<view class="icon">
  13. 						<iconfont name="a-huiyuan1" size="45rpx"></iconfont>
  14. 					</view>
  15. 					<view>会员</view>
  16. 				</view>
  17. 				<view class="item">
  18. 					<view class="icon">
  19. 						<iconfont name="dingdan" size="45rpx"></iconfont>
  20. 					</view>
  21. 					<view>历史订单</view>
  22. 				</view>
  23. 			</view>
  24. 			<view class="right">
  25. 				<view class="item">
  26. 					<view class="icon">
  27. 						<iconfont name="shangpin" size="45rpx"></iconfont>
  28. 					</view>
  29. 					<view>订单</view>
  30. 				</view>
  31. 				<view class="item">
  32. 					<view class="icon">
  33. 						<iconfont name="yonghuming" size="45rpx"></iconfont>
  34. 					</view>
  35. 					<view>我的</view>
  36. 				</view>
  37. 			</view>
  38. 		</view>
  39. 	</view>
  40. </template>
  41.  
  42. <script>
  43. 	export default {
  44. 		data() {
  45. 			return {
  46. 				aaa: 1
  47. 			}
  48. 		},
  49. 		computed: {
  50.  
  51. 		},
  52. 		methods: {
  53.  
  54. 		}
  55. 	}
  56. </script>
  57.  
  58. <style lang="scss" scoped>
  59. 	.mian {
  60. 		position: fixed;
  61. 		left: 0;
  62. 		bottom: 0;
  63. 		background-color: #fff;
  64. 		height: 130rpx;
  65. 		width: 100%;
  66. 		box-shadow: 2rpx -4rpx 6rpx 0px #0000001a;
  67. 		font-size: 30rpx;
  68. 		
  69. 	    padding:calc(env(safe-area-inset-bottom) + 15rpx)  0 calc(env(safe-area-inset-bottom) + 15rpx) 0;
  70. 		.box {
  71. 			width: 100%;
  72. 			height: 100%;
  73. 			display: flex;
  74. 			position: relative;
  75. 			align-items: center;
  76. 			justify-content: space-between;
  77.  
  78. 			.sao {
  79. 				position: absolute;
  80. 				top: -45rpx;
  81. 				
  82. 				left: 315rpx;
  83.  
  84. 				.icon {
  85. 					width: 130rpx;
  86. 					height: 130rpx;
  87. 					display: flex;
  88. 					justify-content: center;
  89. 					align-items: center;
  90. 					border-radius: 50%;
  91. 					border: 15rpx solid #fff;
  92. 					box-shadow: 0px -2rpx 2rpx 0 #00000057;
  93. 					background-color: #0e67fe;
  94. 				}
  95. 				.name{
  96. 					text-align: center;
  97. 				}
  98. 			}
  99.  
  100. 			.left,
  101. 			.right {
  102. 				width: 40%;
  103. 				height: 100%;
  104. 				display: flex;
  105. 				// flex-direction: column;
  106. 				justify-content: space-around;
  107. 				align-items: center;
  108.  
  109. 				.item {
  110. 					width: 50%;
  111.                       display: flex;
  112. 					  flex-direction: column;
  113. 					  align-items: center;
  114. 					.icon {
  115.                        width: 50%;
  116. 					   height: 100%;
  117. 					   padding: 10rpx;
  118. 					   display: flex;
  119. 					   justify-content: center;
  120. 					   align-items: center;
  121. 						// padding: 10rpx;
  122. 						margin-bottom: 5rpx;
  123. 						border: 2rpx solid #999;
  124. 					}
  125. 				}
  126.  
  127. 			}
  128. 		}
  129. 	}
  130. </style>

解决问题后的效果

 解决问题需要算出距离top高度，top: calc(-1 * (env(safe-area-inset-bottom) + 55rpx)); 是其他机型正常显示的top加上iPhoneX高度*-1就好

解决后的代码

  1. <template>
  2. 	<view class="mian">
  3. 		<view class="box">
  4. 			<view class="sao">
  5. 				<view class="icon">
  6. 					<iconfont name="scan" size="50rpx" color="#fff"></iconfont>
  7. 				</view>
  8. 				<view class="name">扫一扫</view>
  9. 			</view>
  10. 			<view class="left">
  11. 				<view class="item">
  12. 					<view class="icon">
  13. 						<iconfont name="a-huiyuan1" size="45rpx"></iconfont>
  14. 					</view>
  15. 					<view>会员</view>
  16. 				</view>
  17. 				<view class="item">
  18. 					<view class="icon">
  19. 						<iconfont name="dingdan" size="45rpx"></iconfont>
  20. 					</view>
  21. 					<view>历史订单</view>
  22. 				</view>
  23. 			</view>
  24. 			<view class="right">
  25. 				<view class="item">
  26. 					<view class="icon">
  27. 						<iconfont name="shangpin" size="45rpx"></iconfont>
  28. 					</view>
  29. 					<view>订单</view>
  30. 				</view>
  31. 				<view class="item">
  32. 					<view class="icon">
  33. 						<iconfont name="yonghuming" size="45rpx"></iconfont>
  34. 					</view>
  35. 					<view>我的</view>
  36. 				</view>
  37. 			</view>
  38. 		</view>
  39. 	</view>
  40. </template>
  41.  
  42. <script>
  43. 	export default {
  44. 		data() {
  45. 			return {
  46. 				aaa: 1
  47. 			}
  48. 		},
  49. 		computed: {
  50.  
  51. 		},
  52. 		methods: {
  53.  
  54. 		}
  55. 	}
  56. </script>
  57.  
  58. <style lang="scss" scoped>
  59. 	.mian {
  60. 		position: fixed;
  61. 		left: 0;
  62. 		bottom: 0;
  63. 		background-color: #fff;
  64. 		height: 130rpx;
  65. 		width: 100%;
  66. 		box-shadow: 2rpx -4rpx 6rpx 0px #0000001a;
  67. 		font-size: 30rpx;
  68. 		
  69. 	    padding:calc(env(safe-area-inset-bottom) + 15rpx)  0 calc(env(safe-area-inset-bottom) + 15rpx) 0;
  70. 		.box {
  71. 			width: 100%;
  72. 			height: 100%;
  73. 			display: flex;
  74. 			position: relative;
  75. 			align-items: center;
  76. 			justify-content: space-between;
  77.  
  78. 			.sao {
  79. 				position: absolute;
  80. 				top: calc(-1 * (env(safe-area-inset-bottom) + 55rpx));
  81. 				left: 315rpx;
  82.  
  83. 				.icon {
  84. 					width: 130rpx;
  85. 					height: 130rpx;
  86. 					display: flex;
  87. 					justify-content: center;
  88. 					align-items: center;
  89. 					border-radius: 50%;
  90. 					border: 15rpx solid #fff;
  91. 					box-shadow: 0px -2rpx 2rpx 0 #00000057;
  92. 					background-color: #0e67fe;
  93. 				}
  94. 				.name{
  95. 					text-align: center;
  96. 				}
  97. 			}
  98.  
  99. 			.left,
  100. 			.right {
  101. 				width: 40%;
  102. 				height: 100%;
  103. 				display: flex;
  104. 				// flex-direction: column;
  105. 				justify-content: space-around;
  106. 				align-items: center;
  107.  
  108. 				.item {
  109. 					width: 50%;
  110.                       display: flex;
  111. 					  flex-direction: column;
  112. 					  align-items: center;
  113. 					.icon {
  114.                        width: 50%;
  115. 					   height: 100%;
  116. 					   padding: 10rpx;
  117. 					   display: flex;
  118. 					   justify-content: center;
  119. 					   align-items: center;
  120. 						// padding: 10rpx;
  121. 						margin-bottom: 5rpx;
  122. 						border: 2rpx solid #999;
  123. 					}
  124. 				}
  125.  
  126. 			}
  127. 		}
  128. 	}
  129. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/152926?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号