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 + + + +``` + +## 📋 核心文件说明 + +### 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 + + + +``` + +## 🎨 自定义配置 + +### 修改颜色配置 + +在 `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 + + + + + +``` + +### 详情页面 + +```vue + + + +``` + +## 🔧 技术实现 + +### 核心原理 + +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 @@ - +