<template>
<view class="hx-navbar" >
<view
:class="{'hx-navbar--fixed': fixed,'hx-navbar--shadow':shadow,'hx-navbar--border':border}"
:style="{'background': backgroundColorRgba}"
class="hx-navbar__content">
<block v-if="backgroundImg">
<image class="navbgimg" :src="backgroundImg" mode=""></image>
</block>
<view :style="{ height: statusBarHeight ,'background': statusBarBackground}" class="hx-status-bar" v-if="statusBar" ></view>
<view :style="{color:colorInfo,height: height,'line-height':height}" class="hd hx-navbar__header hx-navbar__content_view">
<view class="hx-navbar__header-btns hx-navbar__content_view" @tap="onClickLeft" v-if="leftSlot" :style="{'color': colorInfo}">
<block v-if="leftText.length || leftIcon.length || back">
<view
v-if="leftIcon.length || back"
:class="back ? 'left_back' : ''"
class="hx-navbar__content_view" >
<uni-icons :type="back ? 'arrowleft' : leftIcon" :color="colorInfo" size="28"/>
</view>
<view
v-if="leftText.length"
:class="{'hx-navbar-btn-icon-left':!leftIcon.length}"
class="hx-navbar-btn-text hx-navbar__content_view">{{ leftText }}</view>
</block>
<block v-else>
<slot name="leftAfter" v-if="leftSlidiSwitch && slotSlidiSwitch == 1" />
<slot name="left" v-else/>
</block>
</view>
<view class="hx-navbar__header-container hx-navbar__content_view">
<view
v-if="title.length"
class="hx-navbar__header-container-inner hx-navbar__content_view">{{ title }}</view>
<!-- 标题插槽 -->
<block v-else>
<slot name="centerAfter" v-if="centerSlidiSwitch && slotSlidiSwitch == 1"/>
<slot v-else/>
</block>
</view>
<view :class="title.length?'hx-navbar__header-btns-right':''"
class="hx-navbar__header-btns hx-navbar__content_view"
@tap="onClickRight"
v-if="rightSlot">
<!-- 优先显示图标 -->
<block v-if="rightIcon.length || rightText.length">
<view class="hx-navbar__content_view" v-if="rightIcon.length">
<uni-icons :type="rightIcon" :color="colorInfo" size="28"/>
</view>
<view v-if="rightText.length" class="hx-navbar-btn-text hx-navbar__content_view">{{ rightText }}</view>
</block>
<block v-else>
<slot name="rightAfter" v-if="rightSlidiSwitch && slotSlidiSwitch == 1"/>
<slot name="right" v-else/>
</block>
</view>
</view>
</view>
<view
v-if="placeholder"
class="hx-navbar__placeholder">
<view :style="{ height: statusBarHeight}" class="hx-status-bar" v-if="statusBar" ></view>
<view :style="{ height: height}" />
</view>
</view>
</template>
<script>
import uniIcons from '../uni-icons/uni-icons.vue'
//获取系统状态栏高度
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
name: "hx-navbar",
components: {
uniIcons
},
data() {
return {
statusBarHeight: statusBarHeight,
transparentValue: 0,
navTransparentFixedFontColor: '#fff',
statusBarFontColorInfo: [],
backgroundColorRgba: 'rgba(255,255,255,1)',
backgroundColorRgb: 'rgb(222,222,222)',
colorInfo: '#000000',
placeholder: false,
colorContainer: null,
slotSlidiSwitch: 0
};
},
props:{
height:{
type: String,
default: "44px"
},
//导航栏占位符 显示（show），隐藏（hidden），自动（auto：如果头部为固定fiexd ，则显示占位符）
barPlaceholder:{
type: String,
default: "auto"
},
//返回上一页
back:{
type: [Boolean, String],
default: true
},
//标题
title: {
type: String,
default: ''
},
//是否开启左插槽
leftSlot:{
type: [Boolean, String],
default: true
},
//是否开启右插槽
rightSlot:{
type: [Boolean, String],
default: true
},
//左边文字
leftText: {
type: String,
default: ''
},
//右插槽文字
rightText: {
type: String,
default: ''
},
//左插槽图标
leftIcon: {
type: String,
default: ''
},
//右插槽图标
rightIcon: {
type: String,
default: ''
},
//是否固定头
fixed: {
type: [Boolean, String],
default: false
},
//文字颜色
color: {
type: [Array,String],
default: "#000000"
},
//导航栏背景颜色
backgroundColor: {
type: Array,
default: function(){
return new Array([255,255,255],[255,255,255]);
}
},
//线性渐变角度
backgroundColorLinearDeg: {
type: String,
default: '45'
},
//背景图片
backgroundImg: {
type: String,
default: ''
},
//背景透明（show,hidden,auto）
transparent: {
type: String,
default: 'show'
},
//状态栏字体颜色，只支持黑（#000000）和白（#FFFFFF）两种颜色。（,）
statusBarFontColor:{
type: [Array,String],
default:function(){
return new Array("#000000","#000000");
}
},
//是否包含状态栏
statusBar: {
type: [Boolean, String],
default: true
},
//状态栏背景颜色
statusBarBackground:{
type: String,
default: ''
},
//导航栏阴影
shadow: {
type: [String, Boolean],
default: false
},
//导航栏边框
border: {
type: [String, Boolean],
default: false
},
//跳至普通页面
defaultBackUrl: {
type: String,
default: ''
},
//跳至tabber页面
backTabbarUrl: {
type: String,
default: '/pages/index/index'
},
//滑动后切换左插槽
leftSlidiSwitch:{
type: [Boolean,String],
default: false,
},
//滑动后切换中间插槽
centerSlidiSwitch:{
type: [Boolean,String],
default: false
},
//滑动后切换右插槽
rightSlidiSwitch:{
type: [Boolean,String],
default: false
},
//页面的onPageScroll
pageScroll:{
type: Object,
default:function(){
return {}
}
},
},
created(){
var that = this;
//是否添加占位符
switch (that.barPlaceholder){
case 'show':
that.placeholder = true;
break;
case 'hidden':
that.placeholder = false;
break;
case 'auto':
if(that.fixed){
that.placeholder = true;
}
break;
}
//设置状态栏文字颜色
that.setStatusBarFontColor();
//文字颜色
that.colorContainer = typeof that.color == 'object' ? that.color : [that.color,that.color];
that.colorInfo = that.colorContainer[0];
//导航栏透明设置 及监听滚动
switch (that.transparent){
case 'show':
that.transparentValue = 1;
break;
case 'hidden':
that.transparentValue = 0;
break;
case 'auto':
that.setTVAuto(that.pageScroll)
break;
}
that.setBgColor();
//滑动切换
if(that.fixed && (that.leftSlidiSwitch || that.centerSlidiSwitch || that.rightSlidiSwitch)){
that.doScroll(that.pageScroll);
}
},
watch:{
pageScroll(val,oldVal){
var that = this;
//导航栏透明设置 及监听滚动
switch (that.transparent){
case 'show':
that.transparentValue = 1;
break;
case 'hidden':
that.transparentValue = 0;
break;
case 'auto':
this.setTVAuto(val)
break;
}
//滑动切换
if(that.fixed && (that.leftSlidiSwitch || that.centerSlidiSwitch || that.rightSlidiSwitch)){
that.doScroll(val);
}
},
//监控透明度变化
transparentValue(val,oldVal) {
var that = this;
//this.settingColor();
//头条小程序不支持setNavigationBarColor方法
// #ifndef MP-TOUTIAO || H5
if(oldVal > 0.8){
uni.setNavigationBarColor({
frontColor: that.statusBarFontColorInfo[1],
backgroundColor: that.backgroundColorRgb
});
}else if(oldVal < 0.2){
uni.setNavigationBarColor({
frontColor: that.statusBarFontColorInfo[0],
backgroundColor: that.backgroundColorRgb
});
}
// #endif
// #ifdef MP-TOUTIAO
if (tt.setNavigationBarColor) {
if(oldVal > 0.8){
tt.setNavigationBarColor({
frontColor: that.statusBarFontColorInfo[1],
backgroundColor: that.backgroundColorRgb,
success(res) {},
fail(res) {}
});
}else if(oldVal < 0.2){
tt.setNavigationBarColor({
frontColor: that.statusBarFontColorInfo[0],
backgroundColor: that.backgroundColorRgb,
success(res) {},
fail(res) {}
});
}
} else {
console.log("hx-navbar 提示：当前客户端版本过低，无法使用状态栏颜色修改功能，请升级（基础库1.40+）。")
}
// #endif
},
//监听背景颜色
backgroundColor(val,old){
var that = this;
that.setBgColor()
},
color(val,old){
var that = this;
//文字颜色
/* that.colorContainer = typeof val == 'object' ? val : [val,val];
that.colorInfo = that.colorContainer[0]; */
}
},
methods: {
onClickLeft () {
if(this.back){
if(getCurrentPages().length>1){
uni.navigateBack();
}else{
// #ifdef H5
history.back()
// #endif
// #ifndef H5
if(this.defaultBackUrl){
uni.redirectTo({
url:this.defaultBackUrl
})
}else{
if(this.backTabbarUrl){
uni.reLaunch({
url: this.backTabbarUrl
});
}
}
// #endif
}
}else{
this.$emit('click-left')
}
},
onClickRight () {
this.$emit('click-right')
},
//监听滚动后的操作
doScroll(e){
let that = this;
that.$emit('scroll', e);
if (e.scrollTop > 100) {
that.slotSlidiSwitch = 1;
} else {
that.slotSlidiSwitch = 0
}
},
//滑动渐变
setTVAuto(e){
let that = this;
that.$emit('scroll', e);
if (e.scrollTop > 100) {
that.transparentValue = 1;
that.colorInfo = that.colorContainer[1];
} else {
that.transparentValue = e.scrollTop / 100;
that.colorInfo = that.colorContainer[0];
}
that.setBgColor();
},
//背景颜色
setBgColor(){
var that = this;
//如果存在背景图片则背景颜色失效
// if(that.backgroundImg){
// that.backgroundColorRgba = "url(" + that.backgroundImg + ")";
// return;
// }
//背景颜色
if(typeof that.backgroundColor[0] == 'object'){
let l = that.backgroundColor.length;
if( l >= 2){
let rgbStr = "linear-gradient("+ that.backgroundColorLinearDeg +"deg,";
let c = null;
for(var i in that.backgroundColor){
c = that.backgroundColor[i];
rgbStr += "rgba("+ c[0] + "," + c[1] + "," + c[2] +"," + that.transparentValue+")";
if(l != (i*1)+1){
rgbStr += ",";
}
}
rgbStr += ")";
that.backgroundColorRgba = rgbStr;
}
}else{
let rgbStr = that.backgroundColor[0] + ','+ that.backgroundColor[1] + ','+ that.backgroundColor[2];
that.backgroundColorRgb= 'rgb('+ rgbStr + ')';
that.backgroundColorRgba = 'rgba('+ rgbStr +',' + that.transparentValue+')';
}
},
setStatusBarFontColor(){
var that = this;
if(typeof that.statusBarFontColor == 'string'){
that.statusBarFontColorInfo = [that.statusBarFontColor,that.statusBarFontColor];
}else if(typeof that.statusBarFontColor == 'object'){
if (that.statusBarFontColor.length==1){
that.statusBarFontColorInfo = [that.statusBarFontColor[0],that.statusBarFontColor[0]];
}else if(that.statusBarFontColor.length>=2){
that.statusBarFontColorInfo = [that.statusBarFontColor[0],that.statusBarFontColor[1]];
}
}
// #ifndef MP-TOUTIAO || H5
uni.setNavigationBarColor({
frontColor: that.statusBarFontColorInfo[0],
backgroundColor: that.backgroundColorRgb
});
// #endif
// #ifdef MP-TOUTIAO
if (tt.setNavigationBarColor) {
tt.setNavigationBarColor({
frontColor: that.statusBarFontColorInfo[0],
backgroundColor: that.backgroundColorRgb
});
} else {
console.log("hx-navbar 提示：当前客户端版本过低，无法使用状态栏颜色修改功能，请升级（基础库1.40+）。")
}
// #endif
}
},
destroyed(){
},
}
</script>
<style lang="scss">
$nav-height: 44px;
.hd{
overflow: hidden;
}
//防止其他ui影响
.hx-navbar uni-view,
.hx-navbar uni-scroll-view,
.hx-navbar uni-swiper,
.hx-navbar uni-button,
.hx-navbar uni-input,
.hx-navbar uni-textarea,
.hx-navbar uni-label,
.hx-navbar uni-navigator,
.hx-navbar uni-image {
box-sizing: unset;
}
.hx-navbar {
position: relative;
padding-top: 0;
overflow: hidden;
&__content {
display: block;
position: relative;
width: 100%;
/*background-color: $uni-bg-color*/;
overflow: hidden;
.navbgimg{
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
}
.hx-navbar__content_view {
// line-height: $nav-height;
display: flex;
align-items: center;
}
.hx-status-bar {
display: block;
width: 100%;
height: 40px;
height: var(--status-bar-height);
position: relative;
z-index: 1;
}
}
&__header {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
width: 100%;
height: $nav-height;
line-height: $nav-height;
font-size: 36upx;
transition: color 0.5s ease 0s;
&-btns {
display: inline-flex;
flex-wrap: nowrap;
flex-shrink: 0;
min-width: 54px;
//padding: 0 6px;
&:first-child {
padding-left: 0;
}
&:last-child {
min-width: 54px;
}
&-right:last-child{
text-align: right;
flex-direction: row-reverse;
}
}
&-container {
width: 100%;
margin: 0 10upx;
&-inner {
width: 100%;
display: flex;
justify-content: center;
font-size: 36upx;
// padding-right: 60upx;
}
}
}
&__placeholder {
&-view {
height: $nav-height;
}
}
&--fixed {
position: fixed;
top:0;
z-index: 998;
}
&--shadow {
box-shadow: 0 2upx 12upx #ccc;
}
&--border:after {
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
right: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #efefef;
}
}
.left_back{
padding-left: 12upx;
padding-right: 12upx;
}
</style>