项目初始化
This commit is contained in:
jerry
258
components/thorui/tui-navigation-bar/tui-navigation-bar.vue
Normal file
258
components/thorui/tui-navigation-bar/tui-navigation-bar.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<view class="tui-navigation-bar"
|
||||
:class="{ 'tui-bar-line': opacity > 0.85 && splitLine, 'tui-navbar-fixed': isFixed, 'tui-backdrop__filter': backdropFilter && dropDownOpacity > 0 }"
|
||||
:style="{ height: height + 'px', background: isOpacity? `rgba(${background},${opacity})`:background, opacity: dropDownOpacity, zIndex: isFixed ? zIndex : 'auto' }">
|
||||
<view class="tui-status-bar" :style="{ height: statusBarHeight + 'px' }" v-if="isImmersive"></view>
|
||||
<view class="tui-navigation_bar-title"
|
||||
:style="{ opacity: transparent || opacity >= maxOpacity ? 1 : opacity, color: color, paddingTop: top - statusBarHeight + 'px' }"
|
||||
v-if="title && !isCustom">
|
||||
{{ title }}
|
||||
</view>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tuiNavigationBar',
|
||||
emits: ['init', 'change'],
|
||||
props: {
|
||||
//NavigationBar标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//NavigationBar标题颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
//NavigationBar背景颜色,不支持rgb
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//是否需要分割线
|
||||
splitLine: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否设置不透明度
|
||||
isOpacity: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//不透明度最大值 0-1
|
||||
maxOpacity: {
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
//背景透明 【设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效】
|
||||
transparent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//滚动条滚动距离
|
||||
scrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
/*
|
||||
isOpacity 为true时生效
|
||||
opacity=scrollTop /windowWidth * scrollRatio
|
||||
*/
|
||||
scrollRatio: {
|
||||
type: [Number, String],
|
||||
default: 0.3
|
||||
},
|
||||
//是否自定义header内容
|
||||
isCustom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否沉浸式
|
||||
isImmersive: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否开启高斯模糊效果[仅在支持的浏览器有效果]
|
||||
backdropFilter: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//下拉隐藏NavigationBar，主要针对有回弹效果ios端
|
||||
dropDownHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//z-index设置
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 996
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
scrollTop(newValue, oldValue) {
|
||||
if (this.isOpacity && !this.transparent) {
|
||||
this.opacityChange();
|
||||
}
|
||||
},
|
||||
backgroundColor(val) {
|
||||
if (val) {
|
||||
if (this.isOpacity) {
|
||||
this.background = this.hexToRgb(val);
|
||||
} else {
|
||||
this.background = this.transparent ? 'rgba(0, 0, 0, 0)' : val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: 375, //header宽度
|
||||
left: 375, //小程序端 左侧距胶囊按钮距离
|
||||
height: 44, //header高度
|
||||
top: 0,
|
||||
scrollH: 1, //滚动总高度,计算opacity
|
||||
opacity: 1, //0-1
|
||||
statusBarHeight: 0, //状态栏高度
|
||||
background: '255,255,255', //header背景色
|
||||
dropDownOpacity: 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dropDownOpacity = this.backdropFilter && 0;
|
||||
this.opacity = this.isOpacity || this.transparent ? 0 : this.maxOpacity;
|
||||
if (this.isOpacity) {
|
||||
this.background = this.hexToRgb(this.backgroundColor);
|
||||
} else {
|
||||
this.background = this.transparent ? 'rgba(0, 0, 0, 0)' : this.backgroundColor
|
||||
}
|
||||
let obj = {};
|
||||
// #ifdef MP-WEIXIN
|
||||
obj = wx.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU
|
||||
obj = swan.getMenuButtonBoundingClientRect();
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
my.hideAddToDesktopMenu();
|
||||
// #endif
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.statusBarHeight = res.statusBarHeight;
|
||||
this.width = res.windowWidth;
|
||||
this.left = obj.left || res.windowWidth;
|
||||
if (this.isImmersive) {
|
||||
this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
|
||||
}
|
||||
this.scrollH = res.windowWidth * this.scrollRatio;
|
||||
this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
|
||||
this.$emit('init', {
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
left: this.left,
|
||||
top: this.top,
|
||||
statusBarHeight: this.statusBarHeight,
|
||||
opacity: this.opacity,
|
||||
windowHeight: res.windowHeight
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
hexToRgb(hex) {
|
||||
let rgb = '255,255,255';
|
||||
if (hex && ~hex.indexOf('#')) {
|
||||
if (hex.length === 4) {
|
||||
let text = hex.substring(1, 4);
|
||||
hex = '#' + text + text;
|
||||
}
|
||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (result) {
|
||||
rgb = `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}`;
|
||||
}
|
||||
}
|
||||
return rgb;
|
||||
},
|
||||
opacityChange() {
|
||||
if (this.dropDownHide) {
|
||||
if (this.scrollTop < 0) {
|
||||
if (this.dropDownOpacity > 0) {
|
||||
this.dropDownOpacity = 1 - Math.abs(this.scrollTop) / 30;
|
||||
}
|
||||
} else {
|
||||
this.dropDownOpacity = 1;
|
||||
}
|
||||
}
|
||||
|
||||
let scroll = this.scrollTop <= 1 ? 0 : this.scrollTop;
|
||||
let opacity = scroll / this.scrollH;
|
||||
if ((this.opacity >= this.maxOpacity && opacity >= this.maxOpacity) || (this.opacity == 0 && opacity ==
|
||||
0)) {
|
||||
return;
|
||||
}
|
||||
this.opacity = opacity > this.maxOpacity ? this.maxOpacity : opacity;
|
||||
if (this.backdropFilter) {
|
||||
this.dropDownOpacity = this.opacity >= this.maxOpacity ? 1 : this.opacity;
|
||||
}
|
||||
this.$emit('change', {
|
||||
opacity: this.opacity
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tui-navigation-bar {
|
||||
width: 100%;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.tui-backdrop__filter {
|
||||
/* Safari for macOS & iOS */
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
/* Google Chrome */
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.tui-navbar-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.tui-status-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tui-navigation_bar-title {
|
||||
width: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
/* #ifndef APP-PLUS */
|
||||
font-weight: 500;
|
||||
/* #endif */
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tui-bar-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1rpx solid #eaeef1;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user