uniapp-vue2導航欄全局自動下拉變色

全局自動下拉變色解決方案
雀語文章地址
📖 項目簡介
這是一個基于 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. 安裝依賴

  2. 全局配置
    在 main.js 中已經配置了全局 mixin:

import PageScrollMixin from './mixins/page-scroll-mixin.js'// 注冊全局 mixin
Vue.mixin(PageScrollMixin)
  1. 使用導航欄組件
    在任何頁面中直接使用 custom-navbar 組件:
<template><view class="page"><!-- 自定義導航欄 --><custom-navbar title="頁面標題":show-back="true"@back="goBack"ref="customNavbar"//必寫/><!-- 頁面內容 --><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) returnthis.scrollTimer = setTimeout(() => {this.scrollTop = e.scrollTopthis.updateNavbarStyle()this.scrollTimer = null}, 16) // 約60fps},updateNavbarStyle() {// 根據滾動位置更新導航欄樣式const opacity = Math.min(this.scrollTop / 100, 1)this.navbarOpacity = opacityif (opacity > 0.5) {this.navbarTextColor = '#000000'this.navbarBgColor = `rgba(255, 255, 255, ${opacity})`} else {this.navbarTextColor = '#ffffff'this.navbarBgColor = `rgba(255, 255, 255, ${opacity})`}}}
}
  1. 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"ref="customNavbar"//必寫/><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,不執行滾動處理
    }
    }

🤝 貢獻
歡迎提交 Issue 和 Pull Request!

注意:此解決方案專為 uni-app 項目設計,確保在目標平臺上測試兼容性。

全局導航欄組件,自動實現下拉透明到純色

import PageScrollMixin from './mixins/page-scroll-mixin.js'// 注冊全局 mixin
Vue.mixin(PageScrollMixin)
/*** 頁面滾動監聽 Mixin* 用于自動處理 custom-navbar 組件的滾動事件傳遞* * 使用方法:* 1. 在頁面中引入此 mixin* 2. 確保 custom-navbar 組件有 ref="customNavbar"(默認)或自定義 ref* 3. 自動處理滾動事件傳遞* * 配置選項:* - scrollRefs: 需要傳遞滾動事件的組件 ref 數組,默認為 ['customNavbar']* * 使用示例:* * // 基礎用法(使用默認 ref="customNavbar")* export default {*   mixins: [PageScrollMixin],*   // ... 其他配置* }* * // 自定義 ref 名稱* export default {*   mixins: [PageScrollMixin],*   scrollRefs: ['myNavbar'], // 自定義 ref 名稱*   // ... 其他配置* }* * // 多個組件* export default {*   mixins: [PageScrollMixin],*   scrollRefs: ['customNavbar', 'floatingButton'], // 多個組件*   // ... 其他配置* }*/export default {data() {return {// 默認的滾動組件 ref 列表scrollRefs: this.$options.scrollRefs || ['customNavbar']};},// 頁面生命周期onPageScroll(e) {// 自動將頁面滾動事件傳遞給所有配置的組件this.scrollRefs.forEach(refName => {if (this.$refs[refName] && typeof this.$refs[refName].handlePageScroll === 'function') {this.$refs[refName].handlePageScroll(e);}});}
};
<template><view><!-- 填充區,避免內容被導航欄遮擋 --><view class="navbar-placeholder" :style="{ height: navBarHeight + 'px' }"></view><!-- 自定義導航欄 --><view class="custom-navbar" :class="{ 'navbar-scrolled': isScrolled }":style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px',backgroundColor: isScrolled ? backgroundColor : 'transparent'}"><view class="navbar-left" @click="handleBack" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"><image :src="backIcon" mode="aspectFit" class="back-icon"></image></view><view class="navbar-title" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }">{{ title }}</view><view class="navbar-right" :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"><slot name="right"></slot></view></view></view>
</template><script>
import CommonEnum from "../../enum/common";export default {name: 'CustomNavbar',props: {title: {type: String,default: ''},backIcon: {type: String,default: CommonEnum.BACK_BUTTON},showBack: {type: Boolean,default: true},// 新增:滾動相關配置backgroundColor: {type: String,default: CommonEnum.BASE_COLOR // 滾動時的背景色,使用基調顏色},scrollThreshold: {type: Number,default: 20 // 滾動閾值,超過此值開始變色},enableScrollEffect: {type: Boolean,default: true // 是否啟用滾動效果}},data() {return {statusBarHeight: 0,navBarHeight: 0,menuButtonInfo: null,capsuleHeight: 0,// 新增:滾動狀態isScrolled: false,scrollTop: 0,lastScrollTop: 0}},mounted() {this.getSystemInfo();},methods: {getSystemInfo() {// 獲取系統信息const systemInfo = uni.getSystemInfoSync();// 獲取狀態欄高度this.statusBarHeight = systemInfo.statusBarHeight;// 獲取膠囊按鈕信息this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();// 計算膠囊高度this.capsuleHeight = this.menuButtonInfo.height;// 計算導航欄高度(膠囊底部到狀態欄頂部的距離)this.navBarHeight = this.menuButtonInfo.bottom + 8;},handleBack() {if (this.showBack) {// 先觸發自定義事件,讓父組件有機會處理this.$emit('back');// 自動執行返回邏輯uni.navigateBack({delta: 1});}},// 新增:處理頁面滾動(供父組件調用)handlePageScroll(e) {if (!this.enableScrollEffect) return;this.scrollTop = e.scrollTop;// 判斷是否超過滾動閾值if (this.scrollTop > this.scrollThreshold) {if (!this.isScrolled) {this.isScrolled = true;this.$emit('scroll-change', { isScrolled: true, scrollTop: this.scrollTop });}} else {if (this.isScrolled) {this.isScrolled = false;this.$emit('scroll-change', { isScrolled: false, scrollTop: this.scrollTop });}}// 觸發滾動事件,讓父組件可以獲取滾動信息this.$emit('scroll', {scrollTop: this.scrollTop,isScrolled: this.isScrolled});},// 新增:手動設置滾動狀態(供父組件調用)setScrollState(scrollTop) {if (!this.enableScrollEffect) return;this.scrollTop = scrollTop;this.isScrolled = scrollTop > this.scrollThreshold;}}
}
</script><style lang="scss" scoped>
/* 填充區樣式 */
.navbar-placeholder {width: 100%;background-color: transparent;
}/* 自定義導航欄樣式 */
.custom-navbar {position: fixed;top: 0;left: 0;right: 0;z-index: 999;padding-top: 0;background-color: transparent;display: flex;align-items: center;justify-content: space-between;padding-left: 30rpx;padding-right: 30rpx;box-sizing: border-box;transition: background-color 0.3s ease; /* 添加過渡動畫 */
}/* 滾動狀態樣式 */
.navbar-scrolled {box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 滾動時添加陰影 */
}.navbar-left {display: flex;align-items: center;justify-content: center;width: 60rpx;.back-icon {width: 56rpx;height: 56rpx;}
}.navbar-title {font-size: 36rpx;font-weight: bold;color: #695347;flex: 1;text-align: center;display: flex;align-items: center;justify-content: center;
}.navbar-right {width: 60rpx;display: flex;align-items: center;justify-content: center;
}
</style>
<template><view class="page"><custom-navbarref="customNavbar"title="基礎頁面"/><tile-grid/><view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }"><!-- 狀態展示 --><status-displayv-if="loading"type="loading"loading-text="加載中..."/><!-- 頁面內容將在這里添加 --></view></view>
</template><script>
import CommonEnum from "../../enum/common";
import StatusDisplay from "../../components/status-display/status-display.vue";export default {components: {StatusDisplay},data() {return {CommonEnum,loading: false}},onLoad() {// 頁面加載時獲取數據this.loadPageData()},methods: {// 加載頁面數據async loadPageData() {this.loading = truetry {// TODO: 調用頁面數據API// const response = await getPageData()// 模擬加載setTimeout(() => {this.loading = false}, 1000)} catch (error) {console.error('獲取頁面數據失敗:', error)this.loading = false}}}
}
</script><style lang="scss" scoped>
.page {background: #F5F0E7;
}
.header {width: 100%;min-height: 100vh;display: flex;align-items: flex-start;flex-direction: column;padding: 0 15rpx;padding-bottom: 40rpx;
}
</style>

顏色是在枚舉中是 #FFFFFF
圖片都是 網絡地址

雀語文章地址

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/92665.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/92665.shtml
英文地址,請注明出處:http://en.pswp.cn/web/92665.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

自有域名功能詳解——安全可控的企業級訪問方案

ZeroNews 推出自有域名穿透功能&#xff0c;支持用戶將已備案域名與內網服務綁定&#xff0c;實現專業級訪問控制。本文將系統解析其核心能力與操作邏輯。功能價值1. 所有權掌控使用企業自有域名而非第三方子域名&#xff0c;強化品牌一致性及管理權限。2. 安全合規強制 TLS 加…

Python驅動的無人機多光譜-點云融合技術在生態三維建模與碳儲量/生物量/LULC估算中的全流程實戰

隨著生態學、林學、地理信息科學等多個學科對“結構—功能”一體化研究的共同推進&#xff0c;無人機多光譜與結構光攝影測量&#xff08;SfM&#xff09;技術已經從早期實驗室驗證階段&#xff0c;走向區域尺度精細生態監測與資源清查的主流工具。過去十年&#xff0c;厘米級空…

JDY-31藍牙SPP串口透傳模塊

一、產品簡介與應用 JDY-31藍牙基于藍牙3.0 SPP設計&#xff0c;這樣可以支持Windows、Linux、android數據透傳&#xff0c; 工作頻段2.4GHZ&#xff0c;調制方式GFSK&#xff0c;最大發射功率8db&#xff0c;最大發射距離30米&#xff0c;支持用戶通過 AT命令修改設備名、波特…

模塊--繼電器

繼電器模塊詳解 繼電器,是一種常見的電控置裝置,其應用幾乎無處不在。在家庭生活中,繼電器被廣泛應用于照明系統,電視機,空調等電器設備的控制,在工業領域,它們用于控制電機,泵站,生產等高功率設備的運行;繼電器還在通信網絡,交通系統以及醫療設備中發揮著重要作用。…

Error: error:0308010C:digital envelope routines::unsupported at new Hash

1.報錯 這個錯誤通常與 Node.js 的版本有關。從報錯信息中可以看到&#xff0c;使用的 Node 版本是 v22.2.0。 該錯誤是因為 Node.js v17 及以上版本使用了 OpenSSL 3.0&#xff0c;而一些舊的加密算法或方式在 OpenSSL 3.0 中不再支持。 在項目中&#xff0c;通常是因為 webpa…

OpenAI開發者平臺快速入門與API實踐指南

OpenAI開發者平臺快速入門與API實踐指南 一、平臺簡介 OpenAI開發者平臺為開發者提供了強大的人工智能API接口&#xff0c;能夠在短時間內實現文本生成、圖像識別、音頻處理等多種AI能力。本文將詳細介紹如何快速上手&#xff0c;發起API請求&#xff0c;并討論模型選型、功能…

從 GPT?2 到 gpt?oss:解析架構的迭代

From GPT-2 to gpt-oss: Analyzing the Architectural Advances 原文 https://magazine.sebastianraschka.com/p/from-gpt-2-to-gpt-oss-analyzing-the OpenAI 本周剛發布了兩款新的開放權重的大語言模型&#xff1a;gpt-oss-120b 和 gpt-oss-20b&#xff0c;這是自 2019 年 GP…

一周學會Matplotlib3 Python 數據可視化-線條 (Line)

鋒哥原創的Matplotlib3 Python數據可視化視頻教程&#xff1a; https://www.bilibili.com/video/BV1UhtuzcEqX/ 課程介紹 本課程講解利用python進行數據可視化 科研繪圖-Matplotlib&#xff0c;學習Matplotlib圖形參數基本設置&#xff0c;繪圖參數及主要函數&#xff0c;以及…

09-netty基礎-手寫rpc-原理-01

netty系列文章&#xff1a; 01-netty基礎-socket02-netty基礎-java四種IO模型03-netty基礎-多路復用select、poll、epoll04-netty基礎-Reactor三種模型05-netty基礎-ByteBuf數據結構06-netty基礎-編碼解碼07-netty基礎-自定義編解碼器08-netty基礎-自定義序列化和反序列化09-n…

Windows 小知識:Winodws 文件與文件夾名不區分大小寫

專欄導航 上一篇&#xff1a;Windows 編程輔助技能&#xff1a;速覽定義 回到目錄 下一篇&#xff1a;無 本節前言 本節來分享一個小的知識點&#xff0c;具體地&#xff0c;我們在下面來細說。 一. Windows 系統的文件與文件夾的名字&#xff0c;不區分大小寫 請大家…

嵌套-列表存儲字典,字典存儲列表,字典存儲字典

字典存儲列表aliens []for alien in range(10):new_alien {"id": alien, "color": "green", "speed": "slow" , "points": 20}aliens.append(new_alien)for alien in aliens[:5]:print(alien) print("...&…

個人筆記Mybatis2

4.配置解析4.1核心配置文件mybatis-config.xmlMyBatis配置包含對MyBatis行為方式有顯著影響的設置和屬性在 MyBatis 中有兩種類型的事務管理器 (也就是 type"[JDBC|MANAGED]”configuration(配置) properties(屬性) settings(設置) typeAliases(類型別名) typeHandlers(類…

使用 Maxwell 和 RabbitMQ 監控 Mysql Flowable 表變更

為什么需要監控數據庫變化&#xff1f;當 Flowable 表中的數據發生變化&#xff08;例如插入新任務、更新狀態或刪除記錄&#xff09;&#xff0c;我們可能需要觸發其他操作&#xff0c;比如通知用戶、更新儀表盤或啟動新流程。Maxwell 可以讀取 MySQL 的二進制日志&#xff08…

MySQL面試題及詳細答案 155道(041-060)

《前后端面試題》專欄集合了前后端各個知識模塊的面試題&#xff0c;包括html&#xff0c;javascript&#xff0c;css&#xff0c;vue&#xff0c;react&#xff0c;java&#xff0c;Openlayers&#xff0c;leaflet&#xff0c;cesium&#xff0c;mapboxGL&#xff0c;threejs&…

mysql_mcp_server_pro源碼部署及啟動報錯新手指南:讓智能體長出手來直接獲取到最底層的數據

文章目錄 源碼部署 1.克隆項目地址 2.創建虛擬環境 3.激活環境 4.進入項目目錄下 5.安裝依賴 6.進入到src目錄 7.在當前目錄下,新建一個.env文件 8.配置數據庫信息 9.啟動項目 10.啟動權限管理啟動項目 啟動報錯了: 問題現象與直接原因 解決方案與操作步驟 方案1:允許忽略未定…

jupyter服務器創建賬戶加映射對外賬戶地址

文章目錄一、創建test1-test10用戶&#xff08;跳過已存在的test3&#xff09;二、檢查必要組件是否安裝解決方法&#xff1a;用緊湊格式避免換行解析錯誤核心修復說明&#xff1a;使用方法&#xff1a;以下是根據需求生成的命令、檢查腳本及啟動腳本&#xff0c;按步驟執行即可…

DDR中的POD與ODT

一、POD&#xff08;Pseudo Open Drain&#xff09;技術1. 定義與工作原理POD&#xff08;偽開漏&#xff09; 是DDR4/LPDDR4引入的電壓標準與驅動架構&#xff0c;替代傳統的SSTL&#xff08;Stub Series Terminated Logic&#xff09;。其核心特征是將上拉電源從VDDQ改為VTT&…

企業架構之導論(1)

一、企業架構是什么 企業架構是對企業業務、數據、應用、技術四大核心領域及其相互關系的系統化描述與設計框架。它像一張“城市藍圖”,確保業務戰略能精準映射到IT落地: 本質:是連接業務戰略(做什么)與技術執行(怎么做)的結構化方法論。 核心組件: 業務架構:定義業…

實戰:在已有K8S集群如何新增和刪除Node節點

本篇文章將分享一下如何在已有集群添加新節點和刪除現有節點1 新增節點到K8S集群新增節點可以分為準備節點、配置節點和將其加入集群三步。1.1 準備新節點準備一個相同操作系統的主機作為新節點。參考以前部署的文章&#xff1a;實戰部署k8s 1.28版本集群&#xff0c;跟著操作到…

C++ 黑馬 內存分配模型

一, 內存分配模型內存總共有四個分區1 代碼區 主要用來存儲二進制代碼&#xff0c;由操作系統進行管理2 棧區 由編譯器自己進行釋放和分配&#xff0c;例如函數的傳遞的參數&#xff0c;局部變量&#xff0c;const修飾的局部常量等等....3 堆區 由程序員自己分配和釋放&am…