网站建设小程序开发前端样式编写积累style刷新回顶部css计算函数
发布时间：2025-02-07 21:06
使单个元素居中显示
//单个文字居中 display: flex; align-items: center; justify-content: center;
小程序开发时的底部的安全区要留出来,样式如下
<view class="box"></view>
.box{border: 1px solid red; height: env(safe-area-inset-bottom);}小程序开发添加右下角的刷新和回顶部两个按钮
<view class="float">
<view class="item">
刷新
</view>
<view class="item">
顶部
</view>
<!-- <view class="box">
</view> -->
</view>
.float {
position: fixed;
right: 30rpx;
bottom: 80rpx;
// 添加底部安全区域
padding-bottom: env(safe-area-inset-bottom);
.item {
width: 90rpx;
height: 90rpx;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
margin-bottom: 20rpx;
//单个文字居中
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
}
// .box{border: 1px solid red; height: env(safe-area-inset-bottom);}
}css中使用计算函数
padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx) //中间有空格
