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.
145 lines
2.7 KiB
145 lines
2.7 KiB
<template>
|
|
<view class="navbar">
|
|
<view class="content" :style="{ background: isScrolling ? '#fff' : bagColor }">
|
|
<view :style="{ height: `${getHeight.barTop}px` }"></view>
|
|
<view class="acea-row row-center-wrapper bar" :style="{ height: `${getHeight.barHeight}px` }">
|
|
<view class="back-icon acea-row row-center-wrapper">
|
|
<view
|
|
v-show="showBack"
|
|
@click="back"
|
|
class="iconfont icon-ic_leftarrow back-icon"
|
|
:style="{ color: `${iconColor}`, fontSize: `${iconSize}`, fontWeight: `${iconWeight}` }"
|
|
>
|
|
</view>
|
|
<view
|
|
v-show="showHome"
|
|
@click="home"
|
|
class="iconfont icon-icon_home back-icon"
|
|
:style="{ color: `${iconColor}`, fontSize: `${iconSize}`, fontWeight: `${iconWeight}` }"
|
|
>
|
|
</view>
|
|
</view>
|
|
<view class="title" :style="{ color: `${textColor}`, fontSize: `${textSize}`, fontWeight: `${textWeight}` }">{{ titleText }}</view>
|
|
<view class="right-icon acea-row row-center-wrapper">
|
|
<view v-show="showRight" class="right-icon"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="placeholder">
|
|
<view :style="{ height: `${getHeight.barTop}px` }"></view>
|
|
<view :style="{ height: `${getHeight.barHeight}px` }"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'navbar',
|
|
props: {
|
|
// 滚动至下部
|
|
isScrolling: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否显示返回icon
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showHome: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// Title
|
|
titleText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// icon 颜色
|
|
iconColor: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
// icon 字号
|
|
iconSize: {
|
|
type: String,
|
|
default: '40rpx'
|
|
},
|
|
// icon 字重
|
|
iconWeight: {
|
|
type: String,
|
|
default: 'bold'
|
|
},
|
|
// Title 颜色
|
|
textColor: {
|
|
type: String,
|
|
default: '#333'
|
|
},
|
|
// Title 字号
|
|
textSize: {
|
|
type: String,
|
|
default: '34rpx'
|
|
},
|
|
// Title 字重
|
|
textWeight: {
|
|
type: String,
|
|
default: '500'
|
|
},
|
|
// 背景色
|
|
bagColor: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
showRight: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
getHeight: this.$util.getWXStatusHeight()
|
|
};
|
|
},
|
|
methods: {
|
|
back() {
|
|
console.log(111)
|
|
uni.navigateBack();
|
|
},
|
|
home() {
|
|
uni.switchTab({
|
|
url:'/pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navbar {
|
|
position: relative;
|
|
color: #333;
|
|
.content {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 998;
|
|
background-color: var(--view-theme);
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #ffffff;
|
|
.back-icon,
|
|
.right-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.bar {
|
|
padding: 0 30rpx;
|
|
}
|
|
.title {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|