多余导航栏的清理
This commit is contained in:
WindowBird
parent
e123b0eefe
commit
8c18ee9564
|
|
@ -1,83 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="layout">
|
|
||||||
<view :style="{ background: color }" class="navbar">
|
|
||||||
<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
|
|
||||||
<view
|
|
||||||
:style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
|
|
||||||
class="titleBar"
|
|
||||||
>
|
|
||||||
<view class="title">{{ title }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
getStatusBarHeight,
|
|
||||||
getTitleBarHeight,
|
|
||||||
getNavBarHeight,
|
|
||||||
getLeftIconLeft,
|
|
||||||
} from '@/utils/system.js'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '壁纸',
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.layout {
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.statusBar {
|
|
||||||
}
|
|
||||||
|
|
||||||
.titleBar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #3d3d3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
width: 220rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
color: #3d3d3d;
|
|
||||||
font-size: 28rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-left: 5rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
padding-left: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,91 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="layout">
|
|
||||||
<view class="navbar">
|
|
||||||
<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
|
|
||||||
<view
|
|
||||||
:style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
|
|
||||||
class="titleBar"
|
|
||||||
>
|
|
||||||
<view class="search">
|
|
||||||
<image :src="commonEnum.BACK" class="left-icon" @click="goBack"></image>
|
|
||||||
</view>
|
|
||||||
<view class="title">{{ title }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
getStatusBarHeight,
|
|
||||||
getTitleBarHeight,
|
|
||||||
getNavBarHeight,
|
|
||||||
getLeftIconLeft,
|
|
||||||
} from '@/utils/system.js'
|
|
||||||
|
|
||||||
import commonEnum from '../../enum/commonEnum'
|
|
||||||
import { navigateBack } from '../../utils/router'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '壁纸',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
function goBack() {
|
|
||||||
navigateBack(1)
|
|
||||||
console.log('666')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.layout {
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
.statusBar {
|
|
||||||
}
|
|
||||||
|
|
||||||
.titleBar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 220rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
color: #3d3d3d;
|
|
||||||
font-size: 28rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
//background: black;
|
|
||||||
|
|
||||||
.left-icon {
|
|
||||||
margin-left: 60rpx;
|
|
||||||
width: 18rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="layout">
|
|
||||||
<view class="navbar">
|
|
||||||
<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
|
|
||||||
<view
|
|
||||||
:style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
|
|
||||||
class="titleBar"
|
|
||||||
>
|
|
||||||
<view class="search">
|
|
||||||
<image :src="commonEnum.BACK" class="left-icon" @click="goBack"></image>
|
|
||||||
</view>
|
|
||||||
<view class="title">{{ title }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
getStatusBarHeight,
|
|
||||||
getTitleBarHeight,
|
|
||||||
getNavBarHeight,
|
|
||||||
getLeftIconLeft,
|
|
||||||
} from '@/utils/system.js'
|
|
||||||
|
|
||||||
import commonEnum from '../../enum/commonEnum'
|
|
||||||
import { navigateBack } from '../../utils/router'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '壁纸',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
function goBack() {
|
|
||||||
navigateBack(1)
|
|
||||||
console.log('666')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.layout {
|
|
||||||
.navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
background-color: #ff803a;
|
|
||||||
|
|
||||||
.statusBar {
|
|
||||||
}
|
|
||||||
|
|
||||||
.titleBar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
width: 220rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
margin-left: 10rpx;
|
|
||||||
color: #3d3d3d;
|
|
||||||
font-size: 28rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
//background: black;
|
|
||||||
|
|
||||||
.left-icon {
|
|
||||||
margin-left: 60rpx;
|
|
||||||
width: 18rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
# Custom Navbar 组件使用说明
|
|
||||||
|
|
||||||
## 功能特性
|
|
||||||
|
|
||||||
- 自动监听页面滚动
|
|
||||||
- 滚动时导航栏变为纯色背景
|
|
||||||
- 回到顶部时导航栏变为透明
|
|
||||||
- 支持自定义背景色和滚动阈值
|
|
||||||
- 提供滚动状态事件回调
|
|
||||||
|
|
||||||
## 基本用法
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<custom-navbar title="页面标题" />
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 高级用法
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<custom-navbar
|
|
||||||
title="古刹巡礼"
|
|
||||||
:backgroundColor="'#FAF8F3'"
|
|
||||||
:scrollThreshold="100"
|
|
||||||
:enableScrollEffect="true"
|
|
||||||
@scroll-change="onScrollChange"
|
|
||||||
@scroll="onScroll"
|
|
||||||
>
|
|
||||||
<template #right>
|
|
||||||
<view class="right-button">更多</view>
|
|
||||||
</template>
|
|
||||||
</custom-navbar>
|
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
onScrollChange(data) {
|
|
||||||
console.log('滚动状态变化:', data.isScrolled);
|
|
||||||
},
|
|
||||||
onScroll(data) {
|
|
||||||
console.log('滚动位置:', data.scrollTop);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Props 参数
|
|
||||||
|
|
||||||
| 参数 | 类型 | 默认值 | 说明 |
|
|
||||||
|------|------|--------|------|
|
|
||||||
| title | String | '' | 导航栏标题 |
|
|
||||||
| backIcon | String | CommonEnum.BACK_BUTTON | 返回按钮图标 |
|
|
||||||
| showBack | Boolean | true | 是否显示返回按钮 |
|
|
||||||
| backgroundColor | String | '#ffffff' | 滚动时的背景色 |
|
|
||||||
| scrollThreshold | Number | 50 | 滚动阈值（像素） |
|
|
||||||
| enableScrollEffect | Boolean | true | 是否启用滚动效果 |
|
|
||||||
|
|
||||||
## Events 事件
|
|
||||||
|
|
||||||
| 事件名 | 参数 | 说明 |
|
|
||||||
|--------|------|------|
|
|
||||||
| back | - | 点击返回按钮时触发 |
|
|
||||||
| scroll-change | { isScrolled, scrollTop } | 滚动状态变化时触发 |
|
|
||||||
| scroll | { scrollTop, isScrolled } | 页面滚动时触发 |
|
|
||||||
|
|
||||||
## 方法
|
|
||||||
|
|
||||||
| 方法名 | 参数 | 说明 |
|
|
||||||
|--------|------|------|
|
|
||||||
| setScrollState | scrollTop | 手动设置滚动状态 |
|
|
||||||
|
|
||||||
## 样式定制
|
|
||||||
|
|
||||||
组件会自动添加以下 CSS 类：
|
|
||||||
|
|
||||||
- `.navbar-scrolled`: 滚动状态下的样式
|
|
||||||
- 过渡动画：背景色变化有 0.3s 的过渡效果
|
|
||||||
- 阴影效果：滚动时自动添加阴影
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
|
|
||||||
1. **重要**：需要在父页面的 `onPageScroll` 生命周期中调用组件的 `handlePageScroll` 方法
|
|
||||||
2. 滚动效果默认启用，可通过 `enableScrollEffect` 关闭
|
|
||||||
3. 背景色变化有平滑过渡动画
|
|
||||||
4. 组件使用 `ref` 引用，确保在页面中正确引用
|
|
||||||
|
|
||||||
## 完整使用示例
|
|
||||||
|
|
||||||
### 方法一：使用 Mixin（推荐）
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<custom-navbar
|
|
||||||
ref="customNavbar"
|
|
||||||
title="页面标题"
|
|
||||||
backgroundColor="#FAF8F3"
|
|
||||||
:scrollThreshold="50"
|
|
||||||
@scroll-change="onScrollChange"
|
|
||||||
/>
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
|
||||||
import PageScrollMixin from "@/mixins/page-scroll-mixin.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
mixins: [PageScrollMixin], // 自动处理滚动事件
|
|
||||||
components: {
|
|
||||||
CustomNavbar
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onScrollChange(data) {
|
|
||||||
console.log('滚动状态变化:', data.isScrolled);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方法二：手动处理
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<custom-navbar
|
|
||||||
ref="customNavbar"
|
|
||||||
title="页面标题"
|
|
||||||
backgroundColor="#FAF8F3"
|
|
||||||
:scrollThreshold="50"
|
|
||||||
@scroll-change="onScrollChange"
|
|
||||||
/>
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
CustomNavbar
|
|
||||||
},
|
|
||||||
// 页面生命周期 - 必须添加
|
|
||||||
onPageScroll(e) {
|
|
||||||
// 将页面滚动事件传递给导航栏组件
|
|
||||||
if (this.$refs.customNavbar) {
|
|
||||||
this.$refs.customNavbar.handlePageScroll(e);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onScrollChange(data) {
|
|
||||||
console.log('滚动状态变化:', data.isScrolled);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
@ -1,224 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<!-- 填充区，避免内容被导航栏遮挡 -->
|
|
||||||
<view class="navbar-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
|
|
||||||
|
|
||||||
<!-- 自定义导航栏 -->
|
|
||||||
<view
|
|
||||||
class="custom-navbar"
|
|
||||||
:class="{ 'navbar-scrolled': isScrolled }"
|
|
||||||
:style="{
|
|
||||||
paddingTop: statusBarHeight + 'px',
|
|
||||||
height: navBarHeight + 'px',
|
|
||||||
backgroundColor: isScrolled ? backgroundColor : 'transparent',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="navbar-left"
|
|
||||||
@click="handleBack"
|
|
||||||
:style="{
|
|
||||||
height: capsuleHeight + 'px',
|
|
||||||
lineHeight: capsuleHeight + 'px',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<image :src="backIcon" mode="aspectFit" class="back-icon"></image>
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="navbar-title"
|
|
||||||
:style="{
|
|
||||||
height: capsuleHeight + 'px',
|
|
||||||
lineHeight: capsuleHeight + 'px',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ title }}
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
class="navbar-right"
|
|
||||||
:style="{
|
|
||||||
height: capsuleHeight + 'px',
|
|
||||||
lineHeight: capsuleHeight + 'px',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<slot name="right"></slot>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CommonEnum from '../../enum/common'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CustomNavbar',
|
|
||||||
props: {
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
backIcon: {
|
|
||||||
type: String,
|
|
||||||
default: CommonEnum.BACK_BUTTON,
|
|
||||||
},
|
|
||||||
showBack: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
// 新增：滚动相关配置
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: CommonEnum.BASE_COLOR, // 滚动时的背景色，使用基调颜色
|
|
||||||
},
|
|
||||||
scrollThreshold: {
|
|
||||||
type: Number,
|
|
||||||
default: 20, // 滚动阈值，超过此值开始变色
|
|
||||||
},
|
|
||||||
enableScrollEffect: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true, // 是否启用滚动效果
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
statusBarHeight: 0,
|
|
||||||
navBarHeight: 0,
|
|
||||||
menuButtonInfo: null,
|
|
||||||
capsuleHeight: 0,
|
|
||||||
// 新增：滚动状态
|
|
||||||
isScrolled: false,
|
|
||||||
scrollTop: 0,
|
|
||||||
lastScrollTop: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getSystemInfo()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getSystemInfo() {
|
|
||||||
// 获取系统信息
|
|
||||||
const systemInfo = uni.getSystemInfoSync()
|
|
||||||
// 获取状态栏高度
|
|
||||||
this.statusBarHeight = systemInfo.statusBarHeight
|
|
||||||
|
|
||||||
// 获取胶囊按钮信息
|
|
||||||
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
||||||
|
|
||||||
// 计算胶囊高度
|
|
||||||
this.capsuleHeight = this.menuButtonInfo.height
|
|
||||||
|
|
||||||
// 计算导航栏高度（胶囊底部到状态栏顶部的距离）
|
|
||||||
this.navBarHeight = this.menuButtonInfo.bottom + 8
|
|
||||||
},
|
|
||||||
handleBack() {
|
|
||||||
if (this.showBack) {
|
|
||||||
// 先触发自定义事件，让父组件有机会处理
|
|
||||||
this.$emit('back')
|
|
||||||
// 自动执行返回逻辑
|
|
||||||
uni.navigateBack({
|
|
||||||
delta: 1,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新增：处理页面滚动（供父组件调用）
|
|
||||||
handlePageScroll(e) {
|
|
||||||
if (!this.enableScrollEffect) return
|
|
||||||
|
|
||||||
this.scrollTop = e.scrollTop
|
|
||||||
|
|
||||||
// 判断是否超过滚动阈值
|
|
||||||
if (this.scrollTop > this.scrollThreshold) {
|
|
||||||
if (!this.isScrolled) {
|
|
||||||
this.isScrolled = true
|
|
||||||
this.$emit('scroll-change', {
|
|
||||||
isScrolled: true,
|
|
||||||
scrollTop: this.scrollTop,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (this.isScrolled) {
|
|
||||||
this.isScrolled = false
|
|
||||||
this.$emit('scroll-change', {
|
|
||||||
isScrolled: false,
|
|
||||||
scrollTop: this.scrollTop,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 触发滚动事件，让父组件可以获取滚动信息
|
|
||||||
this.$emit('scroll', {
|
|
||||||
scrollTop: this.scrollTop,
|
|
||||||
isScrolled: this.isScrolled,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新增：手动设置滚动状态（供父组件调用）
|
|
||||||
setScrollState(scrollTop) {
|
|
||||||
if (!this.enableScrollEffect) return
|
|
||||||
|
|
||||||
this.scrollTop = scrollTop
|
|
||||||
this.isScrolled = scrollTop > this.scrollThreshold
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
/* 填充区样式 */
|
|
||||||
.navbar-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义导航栏样式 */
|
|
||||||
.custom-navbar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 999;
|
|
||||||
padding-top: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-left: 30rpx;
|
|
||||||
padding-right: 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: background-color 0.3s ease; /* 添加过渡动画 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动状态样式 */
|
|
||||||
.navbar-scrolled {
|
|
||||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 滚动时添加阴影 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 60rpx;
|
|
||||||
|
|
||||||
.back-icon {
|
|
||||||
width: 56rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #695347;
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-right {
|
|
||||||
width: 60rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user