You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
87 lines
2.0 KiB
<!--
|
|
用于 UI状态栏 高度站位
|
|
说明：加入组件并不会开启站位，还需要开启站位功能
|
|
参数：
|
|
frontColor 状态栏字体颜色
|
|
bgColor 状态栏背景色
|
|
statusBaShow 是否开启站位
|
|
方法：
|
|
statusBaShowEvent 开启站位
|
|
statusBaCloseEvent 关闭站位
|
|
-->
|
|
|
|
<template>
|
|
<view class="">
|
|
<view v-if="!!bgPattern && setNavigationBarColorShow">
|
|
<view :style="bgPattern" />
|
|
<view class="bg" :style="bgPattern" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 状态栏字体颜色
|
|
frontColor: {
|
|
type: String,
|
|
default: '#ffffff'
|
|
},
|
|
// 状态栏背景色
|
|
bgColor: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
// 是否开启站位
|
|
statusBaShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
CustomBar: this.CustomBar,
|
|
StatusBar: this.StatusBar,
|
|
setNavigationBarColorShow: false,
|
|
bgPattern: ''
|
|
}
|
|
},
|
|
created() {
|
|
if (this.statusBaShow) {
|
|
this.statusBaShowEvent();
|
|
}
|
|
},
|
|
methods: {
|
|
statusBaCloseEvent() {
|
|
this.setNavigationBarColorShow = false;
|
|
},
|
|
// 调整页眉颜色 并 开启站位
|
|
statusBaShowEvent() {
|
|
let _this = this;
|
|
_this.setNavigationBarColorShow = true;
|
|
uni.setNavigationBarColor({
|
|
frontColor: _this.frontColor, // 前景色值，包括按钮、标题、状态栏的颜色
|
|
backgroundColor: _this.bgColor, // 背景颜色值
|
|
animation: { // 动画效果
|
|
duration: 400,
|
|
timingFunc: 'easeIn'
|
|
},
|
|
success: function(obj) {
|
|
// 固定页面高度和颜色
|
|
_this.bgPattern = 'height:' + (_this.StatusBar) + 'px; ' +
|
|
'background-color: ' + _this.bgColor + ';';
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
}
|
|
</style>
|
|
|