导航栏组件的自动变色

2025-08-07 17:30:36 +08:00 · 2025-08-07 17:30:36 +08:00 · 5e24031199
commit 5e24031199
parent 6916d22815
7 changed files with 291 additions and 77 deletions
--- a/components/custom-navbar/README.md
+++ b/components/custom-navbar/README.md
@ -1,25 +1,149 @@
-# CustomNavbar 自定义导航栏组件
+# Custom Navbar 组件使用说明

 ## 功能特性

- 自动适配微信小程序状态栏高度
- 自动计算胶囊按钮高度，确保文字与胶囊水平对齐
- 支持自定义标题、返回按钮图标
- 支持右侧插槽，可添加自定义内容
- 支持返回事件回调
+- 自动监听页面滚动
+- 滚动时导航栏变为纯色背景
+- 回到顶部时导航栏变为透明
+- 支持自定义背景色和滚动阈值
+- 提供滚动状态事件回调

-## 使用方法
-
-### 基础用法
+## 基本用法

 ```vue
 <template>
-  <view class="page">
+  <view>
    <custom-navbar title="页面标题" />
-    <!-- 页面内容，无需设置 margin-top -->
-    <view class="content">
-      <text>页面内容</text>
-    </view>
+    <!-- 页面内容 -->
+  </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>

@ -29,64 +153,19 @@ 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>
-```
-
-### 自定义返回按钮图标
-
-```vue
-<custom-navbar 
-  title="页面标题" 
-  :backIcon="customBackIcon"
-/>
-```
-
-### 隐藏返回按钮
-
-```vue
-<custom-navbar 
-  title="页面标题" 
-  :showBack="false"
-/>
-```
-
-### 添加右侧内容
-
-```vue
-<custom-navbar title="页面标题">
-  <template #right>
-    <view class="right-content">
-      <text>右侧内容</text>
-    </view>
-  </template>
-</custom-navbar>
-```
-
-## Props
-
-| 参数 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| title | String | '' | 导航栏标题 |
-| backIcon | String | CommonEnum.BACK_BUTTON | 返回按钮图标路径 |
-| showBack | Boolean | true | 是否显示返回按钮 |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| back | 点击返回按钮时触发（可选，组件会自动执行返回逻辑） | - |
-
-## Slots
-
-| 插槽名 | 说明 |
-|--------|------|
-| right | 右侧内容插槽 |
-
-## 注意事项
-
-1. 组件会自动计算状态栏和胶囊高度，无需手动设置
-2. 组件使用 `position: fixed` 定位，确保在页面顶部
-3. 组件内部包含填充区，页面内容无需设置 `margin-top`
-4. 组件样式使用 `scoped`，不会影响其他组件 
+``` 
--- a/components/custom-navbar/custom-navbar.vue
+++ b/components/custom-navbar/custom-navbar.vue
@ -4,7 +4,15 @@
    <view class="navbar-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
    
    <!-- 自定义导航栏 -->
-    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
+    <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>
@ -33,6 +41,19 @@ export default {
    showBack: {
      type: Boolean,
      default: true
+    },
+    // 新增：滚动相关配置
+    backgroundColor: {
+      type: String,
+      default: CommonEnum.BASE_COLOR // 滚动时的背景色，使用基调颜色
+    },
+    scrollThreshold: {
+      type: Number,
+      default: 20 // 滚动阈值，超过此值开始变色
+    },
+    enableScrollEffect: {
+      type: Boolean,
+      default: true // 是否启用滚动效果
    }
  },
  data() {
@ -41,6 +62,10 @@ export default {
      navBarHeight: 0,
      menuButtonInfo: null,
      capsuleHeight: 0,
+      // 新增：滚动状态
+      isScrolled: false,
+      scrollTop: 0,
+      lastScrollTop: 0
    }
  },
  mounted() {
@ -71,6 +96,40 @@ export default {
          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;
    }
  }
 }
@ -98,6 +157,12 @@ export default {
  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 {
--- a/main.js
+++ b/main.js
@ -64,3 +64,8 @@ Vue.prototype.wxLogin = async function(){


 // app.$mount()
+
+import PageScrollMixin from './mixins/page-scroll-mixin.js'
+
+// 注册全局 mixin
+Vue.mixin(PageScrollMixin)
--- a/mixins/page-scroll-mixin.js
+++ b/mixins/page-scroll-mixin.js
@ -0,0 +1,53 @@
+/**
+ * 页面滚动监听 Mixin
+ * 用于自动处理 custom-navbar 组件的滚动事件传递
+ * 
+ * 使用方法：
+ * 1. 在页面中引入此 mixin
+ * 2. 确保 custom-navbar 组件有 ref="customNavbar"（默认）或自定义 ref
+ * 3. 自动处理滚动事件传递
+ * 
+ * 配置选项：
+ * - scrollRefs: 需要传递滚动事件的组件 ref 数组，默认为 ['customNavbar']
+ * 
+ * 使用示例：
+ * 
+ * // 基础用法（使用默认 ref="customNavbar"）
+ * export default {
+ *   mixins: [PageScrollMixin],
+ *   // ... 其他配置
+ * }
+ * 
+ * // 自定义 ref 名称
+ * export default {
+ *   mixins: [PageScrollMixin],
+ *   scrollRefs: ['myNavbar'], // 自定义 ref 名称
+ *   // ... 其他配置
+ * }
+ * 
+ * // 多个组件
+ * export default {
+ *   mixins: [PageScrollMixin],
+ *   scrollRefs: ['customNavbar', 'floatingButton'], // 多个组件
+ *   // ... 其他配置
+ * }
+ */
+
+export default {
+  data() {
+    return {
+      // 默认的滚动组件 ref 列表
+      scrollRefs: this.$options.scrollRefs || ['customNavbar']
+    };
+  },
+  
+  // 页面生命周期
+  onPageScroll(e) {
+    // 自动将页面滚动事件传递给所有配置的组件
+    this.scrollRefs.forEach(refName => {
+      if (this.$refs[refName] && typeof this.$refs[refName].handlePageScroll === 'function') {
+        this.$refs[refName].handlePageScroll(e);
+      }
+    });
+  }
+}; 
--- a/pages/ancient/ancient.vue
+++ b/pages/ancient/ancient.vue
@ -1,6 +1,9 @@
 <template>
  <view class="page">
-    <custom-navbar title="古刹巡礼" />
+    <custom-navbar 
+      ref="customNavbar"
+      title="古刹巡礼"
+    />
    <tile-grid/>
    <scroll-view 
      class="scroll-container" 
@ -61,12 +64,16 @@

 <script>
 import CommonEnum from "../../enum/common";
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 import StatusDisplay from "../../components/status-display/status-display.vue";
 import AncientItem from "./commponts/ancientItem.vue";
 import { getTempleTours } from "../../api/article/article.js";
+import PageScrollMixin from "../../mixins/page-scroll-mixin.js";

 export default {
+  mixins: [PageScrollMixin],
  components: {
+    CustomNavbar,
    StatusDisplay,
    'ancient-item': AncientItem
  },
@ -170,7 +177,8 @@ export default {
      this.refreshing = true;
      await this.loadPageData();
      this.refreshing = false;
-    }
+    },
+
  }
 }
 </script>
--- a/pages/basePage/basePage.vue
+++ b/pages/basePage/basePage.vue
@ -1,6 +1,9 @@
 <template>
  <view class="page">
-    <custom-navbar title="基础页面" />
+    <custom-navbar
+        ref="customNavbar"
+        title="基础页面"
+    />
    <tile-grid/>
    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
      <!-- 状态展示 -->
--- a/pages/basePage/basePagePicture.vue
+++ b/pages/basePage/basePagePicture.vue
@ -2,7 +2,8 @@
  <view class="page">
    <base-background />
    <!-- 使用自定义导航栏组件 -->
-    <custom-navbar title="带图片背景的基础界面" />
+    <custom-navbar title="带图片背景的基础界面"
+                   ref="customNavbar"/>
    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
      <!-- 状态展示 -->
      <status-display