buddhism/README.md

# 全局自动下拉变色解决方案

## 📖 项目简介

这是一个基于 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 项目设计，确保在目标平台上测试兼容性。