hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-13 12:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: titlebar 文字无法居中的问题

Browse Source
This commit is contained in:
huangzhe
2025-08-27 11:43:38 +08:00
parent 9b813b399f
commit 1e21aaeda0
1 changed files with 123 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
components/page-title/page-title.vue
View File

@@ -1,130 +1,135 @@
<template>
<view class="top" :class="[sticky ? 'sticky': '']">
<view v-show="showBack" class="top-back" @click="toBack()">
<!-- <u-icon color="#333" size="20" name="arrow-left"></u-icon>-->
<view class="top" :class="[sticky ? 'sticky': '']">
<view v-show="showBack" class="top-back" @click="toBack()">
<!-- <u-icon color="#333" size="20" name="arrow-left"></u-icon>-->
<
</view>
<view class="top-title"><slot></slot></view>
<view @click="topgae()" style="color: #387DF7;">
<slot name="right"></slot>
</view>
</view>
</view>
<view class="top-title">
<slot></slot>
</view>
<view @click="topgae()" style="color: #387DF7;">
<slot name="right"></slot>
</view>
</view>
</template>
<script>
export default {
props:{
backUrl:{
type:String,
default:''
},
showBack:{
type:Boolean,
default:false
},
goPgae:{
type:String,
default:''
},
// 启用粘性滚动
sticky: {
type: Boolean,
default: false
export default {
props: {
backUrl: {
type: String,
default: ''
},
showBack: {
type: Boolean,
default: false
},
goPgae: {
type: String,
default: ''
},
// 启用粘性滚动
sticky: {
type: Boolean,
default: false
}
},
data() {
return {}
},
methods: {
topgae() {
if (this.goPgae != '') {
uni.navigateTo({
url: this.goPgae
});
}
},
data() {
return {
}
},
methods: {
topgae() {
if(this.goPgae!=''){
uni.navigateTo({
url:this.goPgae
});
}
},
toBack(){
// 如果定义的有 go 事件，优先处理这个
if( this.$listeners['go'] ) {
this.$emit('go')
return
},
toBack() {
// 如果定义的有 go 事件，优先处理这个
if (this.$listeners['go']) {
this.$emit('go')
return
}
if (this.backUrl != '') {
if (this.backUrl == '/pages/my/index') {
uni.switchTab({
url: this.backUrl
})
} else {
uni.navigateTo({
url: this.backUrl
});
}
if(this.backUrl!=''){
if(this.backUrl == '/pages/my/index'){
uni.switchTab({
url:this.backUrl
})
}else{
uni.navigateTo({
url:this.backUrl
});
}
}else{
let pages =getCurrentPages();
//console.log(pages);
const prevPage=pages[pages.length-2];
if(!prevPage){
uni.switchTab({
url:'/pages/index/index'
})
}else{
uni.navigateBack();
}
}
}
}
}
} else {
let pages = getCurrentPages();
//console.log(pages);
const prevPage = pages[pages.length - 2];
if (!prevPage) {
uni.switchTab({
url: '/pages/index/index'
})
} else {
uni.navigateBack();
}
}
}
}
}
</script>
<style lang="scss" scoped>
.top{
height: 40px;
background-color: #fff;
display: flex;
align-items: center;
// justify-content: space-between;
.top-back{
color: #333;
//padding-top:10px;
height: 40px;
line-height: 40px;
padding-left: 15px;
}
.top-title{
text-align: center;
font-size: 16px;
font-weight: 550;
color: #333;
height: 40px;
text-align: center;
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
}
.top {
height: 40px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
&.sticky {
position: sticky;
top: 0;
//防止其他元素遮盖
z-index: 99;
}
}
// .arrow:before {
// content: " ";
// display: inline-block;
// -webkit-transform: rotate(45deg);
// -ms-transform: rotate(45deg);
// transform: rotate(45deg);
// height: .5rem;
// width: .5rem;
// border-width: 0 0 2px 2px;
// border-color: #FFFFFF;
// border-style: solid;
// position: relative;
// top: 0
// }
.top-back {
color: #333;
//padding-top:10px;
height: 40px;
line-height: 40px;
padding-left: 15px;
}
.top-title {
width: 100%;
text-align: center;
position: absolute;
font-size: 16px;
font-weight: 550;
color: #333;
height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
}
&.sticky {
position: sticky;
top: 0;
//防止其他元素遮盖
z-index: 99;
}
}
// .arrow:before {
// content: " ";
// display: inline-block;
// -webkit-transform: rotate(45deg);
// -ms-transform: rotate(45deg);
// transform: rotate(45deg);
// height: .5rem;
// width: .5rem;
// border-width: 0 0 2px 2px;
// border-color: #FFFFFF;
// border-style: solid;
// position: relative;
// top: 0
// }
</style>