193 lines
4.4 KiB
Vue
193 lines
4.4 KiB
Vue
<template>
|
||
<view class="" :style="{height:doginfo.safeAreaInsets.top + doginfo.navbar+'px',backgroundColor:bgcolor,}">
|
||
<view class="navbarBox"
|
||
:style="{height:doginfo.safeAreaInsets.top + doginfo.navbar+'px',backgroundColor:bgcolor}">
|
||
<view :style="{height:doginfo.safeAreaInsets.top +'px'}"></view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="Topnavbar">
|
||
<slot name="left" v-if="backopen">
|
||
<u-icon @click="goBack()" :name="backname" :color="backcolor" size="20"></u-icon>
|
||
</slot>
|
||
<slot name="center">
|
||
<view class="title" :style="{marginLeft: rightwidth - doginfo.qiudata.width + 'px',color:backcolor}"
|
||
v-if="title">
|
||
{{title}}
|
||
</view>
|
||
</slot>
|
||
<view class="navbar-right-slot">
|
||
<slot name="right">
|
||
<!-- 保留占位，确保元素始终存在 -->
|
||
</slot>
|
||
<view :style="{width:doginfo.qiudata.width + 5 +'px',height:'40px'}"></view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="Topnavbar">
|
||
<slot name="left" v-if="backopen">
|
||
<u-icon @click="goBack()" :name="backname" :color="backcolor" size="20"></u-icon>
|
||
</slot>
|
||
<slot name="center">
|
||
<view class="title" :style="{marginLeft:rightwidth+'px',color:backcolor}" v-if="title">{{title}}
|
||
</view>
|
||
</slot>
|
||
<view class="navbar-right-slot">
|
||
<slot name="right">
|
||
<!-- 保留占位，确保元素始终存在 -->
|
||
<view style="width: 38rpx;height: 44rpx;"></view>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "navbar",
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
bgcolor: {
|
||
type: String,
|
||
default: "transparent"
|
||
},
|
||
backcolor: {
|
||
type: String,
|
||
default: "#111111"
|
||
},
|
||
backname: {
|
||
type: String,
|
||
default: "arrow-left"
|
||
},
|
||
backopen: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
watch: {
|
||
title: {
|
||
handler(newVal) {
|
||
console.log(newVal);
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
doginfo: getApp().globalData.doginfo,
|
||
rightwidth: getApp().globalData.doginfo.osName == 'ios' ? 87 : 95 // 新增：存储 right slot 尺寸
|
||
};
|
||
},
|
||
created() {
|
||
// 微信小程序：同步预计算 rightwidth，避免标题闪烁
|
||
if (this.doginfo.type === 'wx') {
|
||
const cw = this.doginfo.qiudata.width;
|
||
// 右侧只有胶囊占位时：占位宽 = cw+5，rightwidth = (cw+5) + cw/2
|
||
this.rightwidth = (cw + 5) + (cw / 2);
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.getRightSlotSize();
|
||
});
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
let pages = getCurrentPages();
|
||
let curRoute = pages[pages.length - 1].route;
|
||
if (pages.length == 1) {
|
||
uni.switchTab({
|
||
url: '/pages/home/home'
|
||
})
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
},
|
||
getRightSlotSize(retryCount = 0) {
|
||
const maxRetries = 3;
|
||
uni.createSelectorQuery().in(this).select('.navbar-right-slot').boundingClientRect((rect) => {
|
||
if (rect && rect.width > 0 && rect.height > 0) {
|
||
if (this.doginfo.type === 'wx') {
|
||
if (rect.width == this.doginfo.qiudata.width + 5) {
|
||
this.rightwidth = rect.width + (this.doginfo.qiudata.width / 2)
|
||
return
|
||
} else {
|
||
this.rightwidth = rect.width - 20
|
||
}
|
||
} else {
|
||
this.rightwidth = rect.width - 20
|
||
}
|
||
} else {
|
||
// 如果还没达到最大重试次数，延迟后重试
|
||
if (retryCount < maxRetries) {
|
||
setTimeout(() => {
|
||
this.getRightSlotSize(retryCount + 1);
|
||
}, 300); // 减少重试间隔
|
||
}
|
||
}
|
||
}).exec();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.navbarBox {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
background-color: #fff;
|
||
z-index: 9999;
|
||
}
|
||
|
||
// #ifdef MP-WEIXIN
|
||
.Topnavbar {
|
||
height: 40px;
|
||
padding: 0 7px;
|
||
width: 100vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
flex-direction: row;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #111111;
|
||
}
|
||
}
|
||
|
||
.navbar-right-slot {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
.Topnavbar {
|
||
height: 44px;
|
||
padding: 0 12px;
|
||
width: 100vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
flex-direction: row;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #111111;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
|
||
// #endif
|
||
</style> |