导航栏组件的自动变色
This commit is contained in:
minimaxagent1
parent
5e24031199
commit
03cb1a2d25
370
README.md
Normal file
370
README.md
Normal file
|
|
@ -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 项目设计，确保在目标平台上测试兼容性。
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<view class="page">
|
||||
<base-background />
|
||||
<!-- 使用自定义导航栏组件 -->
|
||||
<custom-navbar title="寺庙高僧" />
|
||||
<custom-navbar title="寺庙高僧" ref="customNavbar"/>
|
||||
<view class="header">
|
||||
|
||||
<monk-search-box
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user