安全头部
小程序中的胶囊高度是40像素左右,从获取系统信息中可以看到:手机状态栏的高度,
到这里我们就可以算出到胶囊底部的距离;
接下来是我自己写的头部组件:
在components文件夹里新建一个topNavbar.vue
`tempalte`
<template>
<view :style="[allHeight]">
<view class="fixBox">
<view :style="[safeStyle]"></view>
<view class="flexstart mleft" :style="'background:'+bgColor+';color:'+bgColor">
//这个替换成自己的返回图标
<u-icon v-if="isBack" class="backImg" size="20" name="arrow-left" :color="textColor" @click="backPage()"></u-icon>
<view class="navCss" :style="'background:'+bgColor+';color:'+textColor">{{title}}</view>
</view>
</view>
<view class="">
<view :style="[safeStyle]"></view>
<view class="navCss mleft" :style="'background:'+bgColor+';color:'+bgColor">{{title}}</view>
</view>
</view>
</template>
`script`
<script>
export default {
data() {
return {}
},
props: {
title: {//头部标题
default: '标题'
},
bgColor: {//头部背景色
default: "#3F85FF"
},
textColor: {//标题颜色
default: "#fff"
},
isBack:{//是否展示返回按钮
default: false,
}
},
computed: {
safeStyle() {
const style = {}
style.height = uni.getSystemInfoSync().statusBarHeight + 'px'
style.backgroundColor = this.bgColor
return style
},
allHeight(){
const style = {}
style.height = (uni.getSystemInfoSync().statusBarHeight + 40) + 'px'
return style
}
},
methods:{
backPage(){
// 返回上一页
if(this.isBack){
uni.navigateBack()
}
},
}
}
</script>
<style lang="less" scoped>
.fixBox{
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 2;
}
.backImg{
font-size: 40rpx;
padding-right: 32rpx;
}
.navCss {
height: 40px;
line-height: 40px;
}
.mleft{
padding-left: 32rpx;
}
.flexstart{
display: flex;
justify-content: flex-start;
align-items: center;
}
</style>
使用方法
//template
<topNavbar title='会员中心' :textColor='textcolor' :bgColor="bgColor" :isBack="backShow"/>
//script 导入并注册
import navbottom from '@/components/navbottom.vue'
export default {
data(){
return{
textcolor: '#ffffff',//标题颜色
bgColor: 'rgba(36, 36, 48, 1)',//背景色
backShow:false,//是否显示返回按钮
}
},
components:{topNavbar}
}
安全底部
padding-bottom: env(safe-area-inset-bottom);
//为了适配有些机型底部是没有小横线的 可以采取下面的措施;更详细点可以通过获取机型 api 生成合适的底部距离
padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
后续新加了一些自定义项,都上传到了DCloud插件市场了