多余导航栏的清理
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