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

📖 项目简介

这是一个基于 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. 安装依赖

确保项目已安装以下依赖：

npm install uview-ui
npm install weapp-cookie
npm install js-md5

2. 全局配置

在 main.js 中已经配置了全局 mixin：

import PageScrollMixin from './mixins/page-scroll-mixin.js'

// 注册全局 mixin
Vue.mixin(PageScrollMixin)

3. 使用导航栏组件

在任何页面中直接使用 custom-navbar 组件：

<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，为所有页面提供滚动事件处理：

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

自定义导航栏组件，支持动态样式变化：

<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 中可以自定义颜色：

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})`
  }
}

修改触发阈值

调整滚动距离阈值：

// 将 100 改为你想要的阈值
const opacity = Math.min(this.scrollTop / 50, 1) // 50px 开始变化

📱 使用示例

基础页面

<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>

详情页面

<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 的方法：

export default {
  onPageScroll() {
    // 覆盖全局 mixin，不执行滚动处理
  },
}

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

注意：此解决方案专为 uni-app 项目设计，确保在目标平台上测试兼容性。