优化导航栏控件，支持背景透明度
This commit is contained in:
@@ -1,17 +1,35 @@
|
||||
<template>
|
||||
<view
|
||||
class="custom-navbar"
|
||||
:style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
|
||||
:class="{ 'transparent': isTransparent, 'opaque': !isTransparent }"
|
||||
:style="{
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
height: navHeight + 'px',
|
||||
// 使用rgba颜色值控制背景透明度，而不是整个元素的opacity
|
||||
backgroundColor: `rgba(${hexToRgb(bgColor)}, ${opacity})`
|
||||
}"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<!-- 左侧返回 -->
|
||||
<view class="nav-left">
|
||||
<u-icon name="arrow-left" size="44" color="#333" @click="onBack" v-if="showBack"></u-icon>
|
||||
<u-icon name="home" size="44" color="#333" @click="goHome" v-if="showHome"></u-icon>
|
||||
<u-icon
|
||||
name="arrow-left"
|
||||
size="44"
|
||||
:color="textColor"
|
||||
@click="onBack"
|
||||
v-if="showBack"
|
||||
></u-icon>
|
||||
<u-icon
|
||||
name="home"
|
||||
size="44"
|
||||
:color="textColor"
|
||||
@click="goHome"
|
||||
v-if="showHome"
|
||||
></u-icon>
|
||||
</view>
|
||||
|
||||
<!-- 中间标题 -->
|
||||
<view class="nav-title">{{ title }}</view>
|
||||
<view class="nav-title" :style="{ color: textColor }">{{ title }}</view>
|
||||
|
||||
<!-- 右侧按钮（位于胶囊左侧） -->
|
||||
<view
|
||||
@@ -26,10 +44,18 @@
|
||||
>
|
||||
<u-icon
|
||||
:name="btn.icon"
|
||||
:color="btn.color || '#333'"
|
||||
:color="btn.color || textColor"
|
||||
:size="btn.size || 40"
|
||||
></u-icon>
|
||||
</view>
|
||||
<!-- 额外的右侧图标 -->
|
||||
<view class="nav-btn" v-for="(icon, index) in extraIcons" :key="index" @click="onExtraIconClick(index)">
|
||||
<u-icon
|
||||
:name="icon"
|
||||
:color="textColor"
|
||||
size="40"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -51,13 +77,36 @@ export default {
|
||||
type: Function,
|
||||
default: null,
|
||||
},
|
||||
// 导航栏样式控制
|
||||
isTransparent: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
opacity: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
extraIcons: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
// 按钮显示控制
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: true // 左侧返回按钮默认显示
|
||||
},
|
||||
showHome: {
|
||||
type: Boolean,
|
||||
default: true // 回首页按钮默认显示
|
||||
default: false // 回首页按钮默认不显示
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -87,6 +136,24 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 十六进制颜色转RGB
|
||||
hexToRgb(hex) {
|
||||
// 移除#号
|
||||
hex = hex.replace(/^#/, '');
|
||||
|
||||
// 处理缩写形式（如#RGB）
|
||||
if (hex.length === 3) {
|
||||
hex = hex.split('').map(char => char + char).join('');
|
||||
}
|
||||
|
||||
// 解析RGB值
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
return `${r}, ${g}, ${b}`;
|
||||
},
|
||||
|
||||
onBack() {
|
||||
if (this.back) {
|
||||
this.back();
|
||||
@@ -98,6 +165,10 @@ export default {
|
||||
uni.reLaunch({
|
||||
url:'../index/index'
|
||||
})
|
||||
},
|
||||
onExtraIconClick(index) {
|
||||
// 额外图标点击事件，可通过事件冒泡传递给父组件
|
||||
this.$emit('extra-icon-click', index);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -109,9 +180,8 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
@@ -131,8 +201,6 @@ export default {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
@@ -142,5 +210,15 @@ export default {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 透明状态样式
|
||||
&.transparent {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
// 不透明状态样式
|
||||
&.opaque {
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<view class="asset-detail">
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- <customNavbar
|
||||
title="资产详情" ref="navbar"/> -->
|
||||
<customNavbar
|
||||
title="资产详情"
|
||||
ref="navbar"
|
||||
:is-transparent="navbarStyle.isTransparent"
|
||||
:bg-color="navbarStyle.bgColor"
|
||||
:text-color="navbarStyle.textColor"
|
||||
:opacity="navbarStyle.opacity"
|
||||
:extra-icons="navbarStyle.extraIcons"
|
||||
:show-home="false"
|
||||
/>
|
||||
|
||||
<!-- <u-navbar title="资产详情" :autoBack="true" :background="background" title-color="#2D2B2C"
|
||||
back-icon-color="#2D2B2C">
|
||||
</u-navbar> -->
|
||||
<!-- 图片展示区 -->
|
||||
<view class="image-section" :style="{ paddingTop: navTotalHeight + 'px' }">
|
||||
<u-icon name="arrow-left" color="#000000" size="24px" @click="back"></u-icon>
|
||||
<image src="/static/30091712.jpg"></image>
|
||||
<!-- <AssetGallery
|
||||
:insideImages="asset.images"
|
||||
@@ -156,6 +160,18 @@
|
||||
// 渐变色
|
||||
// backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
|
||||
},
|
||||
|
||||
// 导航栏样式控制
|
||||
navbarStyle: {
|
||||
isTransparent: true,
|
||||
bgColor: '#ffffff',
|
||||
textColor: '#000000',
|
||||
opacity: 0,
|
||||
extraIcons: ['ellipsis', 'eye'] // 右侧额外图标
|
||||
},
|
||||
|
||||
// 滚动距离
|
||||
scrollTop: 0
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -165,12 +181,36 @@
|
||||
// this.recordView();
|
||||
},
|
||||
mounted() {
|
||||
// const navbar = this.$refs.navbar;
|
||||
// const navHeight = navbar.navContentHeight; // 直接拿子组件 data
|
||||
// this.navTotalHeight = navHeight; // 加上额外间距
|
||||
|
||||
const navbar = this.$refs.navbar;
|
||||
const navHeight = navbar.navContentHeight; // 直接拿子组件 data
|
||||
this.navTotalHeight = navHeight; // 加上额外间距
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
// 计算导航栏透明度和样式
|
||||
this.updateNavbarStyle(e.scrollTop);
|
||||
},
|
||||
methods: {
|
||||
// 根据滚动距离更新导航栏样式
|
||||
updateNavbarStyle(scrollTop) {
|
||||
// 定义滚动阈值，超过此值导航栏变为不透明
|
||||
const threshold = 200;
|
||||
|
||||
// 计算透明度
|
||||
let opacity = scrollTop / threshold;
|
||||
opacity = Math.min(opacity, 1);
|
||||
opacity = Math.max(opacity, 0);
|
||||
|
||||
// 更新导航栏样式
|
||||
this.navbarStyle.opacity = opacity;
|
||||
|
||||
if (opacity > 0.5) {
|
||||
this.navbarStyle.isTransparent = false;
|
||||
} else {
|
||||
this.navbarStyle.isTransparent = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 模拟接口请求
|
||||
loadAssetDetail() {
|
||||
setTimeout(() => {
|
||||
@@ -187,19 +227,24 @@
|
||||
address: '广州市天河区体育西路88号',
|
||||
lat: 23.135,
|
||||
lng: 113.327,
|
||||
images: [{
|
||||
images: [
|
||||
{
|
||||
image:'/static/img/index/swiper/swiper3.jpg'
|
||||
}],
|
||||
}
|
||||
|
||||
],
|
||||
remark: '该资产目前用于办公出租，维护状态良好。',
|
||||
isFavorite: false,
|
||||
status: 0
|
||||
};
|
||||
this.markers = [{
|
||||
this.markers = [
|
||||
{
|
||||
id: 1,
|
||||
latitude: this.asset.lat,
|
||||
longitude: this.asset.lng,
|
||||
title: this.asset.name,
|
||||
}, ];
|
||||
},
|
||||
];
|
||||
}, 300);
|
||||
},
|
||||
formatMoney(num) {
|
||||
@@ -238,31 +283,10 @@
|
||||
|
||||
});
|
||||
},
|
||||
back(){
|
||||
// let pages = getCurrentPages();
|
||||
// let beforePage = pages[pages.length - 2];
|
||||
|
||||
uni.navigateBack({
|
||||
// delta: 1,
|
||||
success: function() {
|
||||
// beforePage.onLoad(beforePage
|
||||
// .options); // 执行前一个页面的onLoad方法
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-section >>> .u-icon{
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
top: 80rpx;
|
||||
left: 36rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.asset-detail {
|
||||
background-color: #f7f8fa;
|
||||
|
||||
Reference in New Issue
Block a user