1. 使用 Safe Area Insets
吸底按钮
/* 在页面的 WXSS 文件中 */
.container {
display: flex;
flex-direction: column;
height: 100vh;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-button {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: #007aff;
color: #fff;
text-align: center;
border: none;
border-radius: 10px;
}
2. 确保适配所有屏幕
/* WXSS 文件中 */
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.bottom-button {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60rpx; /* 使用 rpx 单位使按钮在不同屏幕上自适应 */
background-color: #007aff;
color: #fff;
text-align: center;
line-height: 60rpx; /* 使文本垂直居中 */
border: none;
border-radius: 10rpx;
}
3. 考虑不同屏幕比例
/* WXSS 文件中 */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.bottom-button {
position: fixed;
bottom: env(safe-area-inset-bottom);
left: 0;
width: 100%;
height: 60rpx;
background-color: #007aff;
color: #fff;
text-align: center;
line-height: 60rpx;
border: none;
border-radius: 10rpx;
}
