小程序之吸底按钮的适配

最新推荐文章于 2024-07-13 18:52:21 发布

gyuei

最新推荐文章于 2024-07-13 18:52:21 发布

阅读量1k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/gyueh/article/details/115182815

版权

小程序专栏收录该内容

67 篇文章 6 订阅

订阅专栏

本文详细介绍了如何在微信小程序中实现底部按钮始终居底显示，并能适配不同型号手机的安全区域。通过设置.view.spaceArea和.view.bottom的CSS样式，结合env()和constant()函数处理安全区域，确保了在各种设备上的完美布局。关键代码包括使用padding-bottom和position:fixed，以及针对不同设备的适配策略。

摘要由CSDN通过智能技术生成

要求：
1.按钮始终居底显示
2.吸底按钮区能适配各类手机

wxml部分代码如下：

<!-- 占位区 ----防止底部内容被遮挡-->
<view class="spaceArea"></view>
<!-- 吸底区 -->
<view class="bottom" >
	<button>按钮</button>
</view>

wxss部分代码如下：

.spaceArea {
  height: 90px;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}
.bottom {
  padding-top: 20rpx;
  padding-bottom: calc(70rpx + env(safe-area-inset-bottom));//适配
  padding-bottom: calc(70rpx + constant(safe-area-inset-bottom));//适配
  position: fixed;
  background: #F7F7F5;
  bottom: 0rpx
}

注意:

padding-bottom:env(safe-area-inset-bottom)//适配
padding-bottom:constant(safe-area-inset-bottom)//适配

最终效果如图所示:

在这里插入图片描述

gyuei

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序之 吸底按钮的适配

小程序之吸底按钮的适配