From 03cb1a2d25f5dc8a4b634cb57f04ec1da188b5f3 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Thu, 7 Aug 2025 18:00:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E8=87=AA=E5=8A=A8=E5=8F=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md           | 370 ++++++++++++++++++++++++++++++++++++++++++++
 pages/monk/monk.vue |   2 +-
 2 files changed, 371 insertions(+), 1 deletion(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..92d2cf7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,370 @@
+# 全局自动下拉变色解决方案
+
+## 📖 项目简介
+
+这是一个基于 Vue.js 和 uni-app 的全局自动下拉变色解决方案，通过全局 mixin 实现页面滚动时导航栏的自动颜色变化效果。
+
+## ✨ 核心特性
+
+- 🎯 **全局自动生效**：无需在每个页面手动导入，自动为所有页面添加滚动监听
+- 🎨 **智能颜色变化**：根据滚动位置自动调整导航栏背景色和文字颜色
+- 📱 **跨平台兼容**：支持微信小程序、H5、App 等多端
+- ⚡ **性能优化**：使用节流函数优化滚动事件处理
+- 🔧 **易于配置**：支持自定义颜色配置和触发阈值
+
+## 🏗️ 项目结构
+
+```
+buddhism/
+├── mixins/
+│   └── page-scroll-mixin.js          # 全局滚动监听 mixin
+├── components/
+│   └── custom-navbar/
+│       └── custom-navbar.vue         # 自定义导航栏组件
+├── main.js                           # 全局 mixin 注册
+└── pages/
+    └── basePage/
+        └── basePage.vue              # 示例页面
+```
+
+## 🚀 快速开始
+
+### 1. 安装依赖
+
+确保项目已安装以下依赖：
+
+```bash
+npm install uview-ui
+npm install weapp-cookie
+npm install js-md5
+```
+
+### 2. 全局配置
+
+在 `main.js` 中已经配置了全局 mixin：
+
+```javascript
+import PageScrollMixin from './mixins/page-scroll-mixin.js'
+
+// 注册全局 mixin
+Vue.mixin(PageScrollMixin)
+```
+
+### 3. 使用导航栏组件
+
+在任何页面中直接使用 `custom-navbar` 组件：
+
+```vue
+<template>
+  <view class="page">
+    <!-- 自定义导航栏 -->
+    <custom-navbar 
+      title="页面标题"
+      :show-back="true"
+      @back="goBack"
+    />
+    
+    <!-- 页面内容 -->
+    <view class="content">
+      <!-- 你的页面内容 -->
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'YourPage',
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+```
+
+## 📋 核心文件说明
+
+### 1. `mixins/page-scroll-mixin.js`
+
+全局滚动监听 mixin，为所有页面提供滚动事件处理：
+
+```javascript
+export default {
+  data() {
+    return {
+      scrollTop: 0,
+      navbarOpacity: 0,
+      navbarTextColor: '#000000',
+      navbarBgColor: 'rgba(255, 255, 255, 0)'
+    }
+  },
+  
+  onPageScroll(e) {
+    this.handlePageScroll(e)
+  },
+  
+  methods: {
+    handlePageScroll(e) {
+      // 节流处理滚动事件
+      if (this.scrollTimer) return
+      
+      this.scrollTimer = setTimeout(() => {
+        this.scrollTop = e.scrollTop
+        this.updateNavbarStyle()
+        this.scrollTimer = null
+      }, 16) // 约60fps
+    },
+    
+    updateNavbarStyle() {
+      // 根据滚动位置更新导航栏样式
+      const opacity = Math.min(this.scrollTop / 100, 1)
+      this.navbarOpacity = opacity
+      
+      if (opacity > 0.5) {
+        this.navbarTextColor = '#000000'
+        this.navbarBgColor = `rgba(255, 255, 255, ${opacity})`
+      } else {
+        this.navbarTextColor = '#ffffff'
+        this.navbarBgColor = `rgba(255, 255, 255, ${opacity})`
+      }
+    }
+  }
+}
+```
+
+### 2. `components/custom-navbar/custom-navbar.vue`
+
+自定义导航栏组件，支持动态样式变化：
+
+```vue
+<template>
+  <view 
+    class="custom-navbar"
+    :style="navbarStyle"
+  >
+    <view class="navbar-content">
+      <view 
+        v-if="showBack" 
+        class="back-btn"
+        @click="handleBack"
+      >
+        <text class="back-icon">‹</text>
+      </view>
+      
+      <text 
+        class="navbar-title"
+        :style="{ color: navbarTextColor }"
+      >
+        {{ title }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomNavbar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    showBack: {
+      type: Boolean,
+      default: false
+    }
+  },
+  
+  computed: {
+    navbarStyle() {
+      return {
+        backgroundColor: this.navbarBgColor,
+        color: this.navbarTextColor
+      }
+    }
+  },
+  
+  methods: {
+    handleBack() {
+      this.$emit('back')
+    }
+  }
+}
+</script>
+```
+
+## 🎨 自定义配置
+
+### 修改颜色配置
+
+在 `mixins/page-scroll-mixin.js` 中可以自定义颜色：
+
+```javascript
+updateNavbarStyle() {
+  const opacity = Math.min(this.scrollTop / 100, 1)
+  this.navbarOpacity = opacity
+  
+  // 自定义颜色逻辑
+  if (opacity > 0.5) {
+    this.navbarTextColor = '#333333'  // 深色文字
+    this.navbarBgColor = `rgba(255, 255, 255, ${opacity})`
+  } else {
+    this.navbarTextColor = '#ffffff'  // 白色文字
+    this.navbarBgColor = `rgba(0, 0, 0, ${opacity * 0.3})`
+  }
+}
+```
+
+### 修改触发阈值
+
+调整滚动距离阈值：
+
+```javascript
+// 将 100 改为你想要的阈值
+const opacity = Math.min(this.scrollTop / 50, 1)  // 50px 开始变化
+```
+
+## 📱 使用示例
+
+### 基础页面
+
+```vue
+<template>
+  <view class="page">
+    <custom-navbar 
+      title="首页"
+      :show-back="false"
+    />
+    
+    <view class="content">
+      <view class="banner">
+        <image src="/static/banner.jpg" mode="aspectFill" />
+      </view>
+      
+      <view class="list">
+        <view 
+          v-for="item in 20" 
+          :key="item"
+          class="list-item"
+        >
+          列表项 {{ item }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'HomePage'
+}
+</script>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.content {
+  padding-top: 44px; /* 导航栏高度 */
+}
+
+.banner {
+  height: 200px;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+}
+
+.list-item {
+  padding: 15px;
+  margin: 10px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+</style>
+```
+
+### 详情页面
+
+```vue
+<template>
+  <view class="page">
+    <custom-navbar 
+      title="详情页"
+      :show-back="true"
+      @back="goBack"
+    />
+    
+    <view class="content">
+      <view class="hero-image">
+        <image src="/static/detail.jpg" mode="aspectFill" />
+      </view>
+      
+      <view class="detail-content">
+        <text class="title">详情标题</text>
+        <text class="description">详情描述内容...</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DetailPage',
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    }
+  }
+}
+</script>
+```
+
+## 🔧 技术实现
+
+### 核心原理
+
+1. **全局 Mixin**：通过 Vue 的全局 mixin 机制，为所有页面自动注入滚动监听
+2. **节流优化**：使用 `setTimeout` 实现 60fps 的滚动事件节流
+3. **动态样式**：根据滚动位置计算透明度，实现平滑的颜色过渡
+4. **响应式数据**：通过 Vue 的响应式系统，自动更新导航栏样式
+
+### 性能优化
+
+- ✅ 滚动事件节流（16ms 间隔）
+- ✅ 使用 `computed` 属性缓存样式计算
+- ✅ 避免频繁的 DOM 操作
+- ✅ 合理的内存管理
+
+## 🐛 常见问题
+
+### Q: 导航栏不显示？
+A: 确保页面内容有足够的高度可以滚动，并且设置了正确的 `padding-top`
+
+### Q: 颜色变化不明显？
+A: 检查背景图片的对比度，可以调整颜色配置或透明度
+
+### Q: 在某些页面不需要效果？
+A: 可以在特定页面中覆盖 mixin 的方法：
+
+```javascript
+export default {
+  onPageScroll() {
+    // 覆盖全局 mixin，不执行滚动处理
+  }
+}
+```
+
+## 📄 许可证
+
+MIT License
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+---
+
+**注意**：此解决方案专为 uni-app 项目设计，确保在目标平台上测试兼容性。 
\ No newline at end of file
diff --git a/pages/monk/monk.vue b/pages/monk/monk.vue
index 287513a..d3787de 100644
--- a/pages/monk/monk.vue
+++ b/pages/monk/monk.vue
@@ -2,7 +2,7 @@
   <view class="page">
     <base-background />
     <!-- 使用自定义导航栏组件 -->
-    <custom-navbar title="寺庙高僧" />
+    <custom-navbar title="寺庙高僧"  ref="customNavbar"/>
 		<view class="header">
 
 			<monk-search-box