H5动态公共导航栏

CommonNavBar.vue：

<template><divclass="common-nav-bar":style="navBarStyle"><!-- 状态栏占位，可以按项目需要删除或调整高度 --><divclass="status-bar-placeholder"></div><!-- 主导航栏，使用 Vant NavBar --><van-nav-bar :title="title":left-text="leftText":right-text="rightText":left-arrow="leftArrow"@click-left="$emit('click-left')"@click-right="$emit('click-right')":border="false":fixed="fixed"><!-- 支持插槽透传 --><template v-if="$slots.left"#left><slotname="left"></slot></template><template v-if="$slots.right"#right><slotname="right"></slot></template><template v-if="$slots.title"#title><slotname="title"></slot></template></van-nav-bar></div></template><script>exportdefault{name:'CommonNavBar', props:{// 标题、左右文案等常规配置 title:{type: String, default:''}, leftText:{type: String, default:''}, rightText:{type: String, default:''}, leftArrow:{type: Boolean, default:true}, fixed:{type: Boolean, default:true}, /** * 滚动距离，由父组件传入（必传） * 比如 window / 容器的 scrollTop */ scrollTop:{type: Number, required: true, default:0}, /** * 背景配置 *1. startColor: 起始背景色（未滚动 / 透明阶段） *2. endColor: 结束背景色（滚动到阈值后的颜色） *3. bgImage: 默认背景图片（未滚动或透明时） *4. endBgImage: 滚动到阈值后的背景图片（可选） *5. changeDistance: 背景从0->1完成过渡的滚动距离 *6. useOpacity: 是否通过透明度渐变（true 时使用 startColor/endColor + opacity） */ backgroundConfig:{type: Object, default:()=>({startColor:'#ffffff', endColor:'#ffffff', bgImage:'', // 如'https://xxx/xxx.png'endBgImage:'', // 如'https://xxx/yyy.png'changeDistance:150, // 滚动 150px 完成渐变 useOpacity:true})}}, computed:{// 归一化滚动进度：0 ~1progress(){const d=this.backgroundConfig.changeDistance||150;const p=this.scrollTop / d;returnp>1?1:p<0?0:p;},navBarStyle(){const{startColor, endColor, bgImage, endBgImage, useOpacity}=this.backgroundConfig;const style={position: this.fixed ?'fixed':'relative', top:0, left:0, right:0, zIndex:100, transition:'background 0.25s linear', // 让背景图在 NavBar 外层生效 backgroundRepeat:'no-repeat', backgroundSize:'cover', backgroundPosition:'center center'};//1. 处理背景图片切换 // 当 progress<1使用 bgImage，progress===1时使用 endBgImage（若有）if(bgImage||endBgImage){// 你也可以根据 progress 做淡入淡出，这里做简单切换 const useEndImg=endBgImage&&this.progress===1;style.backgroundImage=`url(${useEndImg ? endBgImage:bgImage})`;}//2. 处理背景色 / 透明度渐变if(useOpacity){//2.1使用 endColor，但通过透明度从0~1渐变 const endRGBA=this.hexToRgba(endColor||'#ffffff', this.progress);style.backgroundColor=endRGBA;}else{//2.2在 startColor 和 endColor 之间做颜色插值 style.backgroundColor=this.mixColor(startColor, endColor, this.progress);}returnstyle;}}, methods:{/** *16进制颜色转 rgba * hex:'#RRGGBB'/'#RGB'*/ hexToRgba(hex, alpha=1){if(!hex)return`rgba(255,255,255,${alpha})`;letr=255, g=255, b=255;letnormalized=hex.replace('#','');if(normalized.length===3){r=parseInt(normalized[0]+ normalized[0],16);g=parseInt(normalized[1]+ normalized[1],16);b=parseInt(normalized[2]+ normalized[2],16);}elseif(normalized.length===6){r=parseInt(normalized.slice(0,2),16);g=parseInt(normalized.slice(2,4),16);b=parseInt(normalized.slice(4,6),16);}return`rgba(${r},${g},${b},${alpha})`;}, /** * 颜色插值：在 startColor 和 endColor 之间按照 t(0~1)做线性渐变 */ mixColor(start, end, t){const parseHex=(hex)=>{letnormalized=hex.replace('#','');if(normalized.length===3){normalized=normalized .split('').map((c)=>c + c).join('');}const r=parseInt(normalized.slice(0,2),16);const g=parseInt(normalized.slice(2,4),16);const b=parseInt(normalized.slice(4,6),16);return{r, g, b};};const s=parseHex(start||'#ffffff');const e=parseHex(end||'#ffffff');const r=Math.round(s.r +(e.r - s.r)* t);const g=Math.round(s.g +(e.g - s.g)* t);const b=Math.round(s.b +(e.b - s.b)* t);return`rgb(${r},${g},${b})`;}}};</script><style scoped>.common-nav-bar{/* 外层容器高度=状态栏 + van-nav-bar 高度 * 按项目情况可以自定义；也可以不要 status-bar-placeholder，只用 NavBar 自己的高度。 */}/* 顶部状态栏占位，可在 APP 内嵌 H5 时按机型改成环境变量高度 */ .status-bar-placeholder{height:0;/* 如果需要留出状态栏高度，可改成20/24等 */}</style>

Home.vue：

<template><divclass="page"@scroll.passive="onScroll"ref="scrollContainer"><common-nav-bar :title="'首页'":scroll-top="scrollTop":background-config="navBgConfig"@click-left="onBack"/><!-- 实际内容 --><divclass="page-content"><!-- 模拟内容占位 --><div v-for="i in 50":key="i"class="block">内容{{i}}</div></div></div></template><script>importCommonNavBar from'@/components/CommonNavBar.vue';exportdefault{name:'Home', components:{CommonNavBar},data(){return{scrollTop:0, navBgConfig:{// 起始为透明白色（用 opacity 渐变） startColor:'#ffffff', endColor:'#ffffff', bgImage:'https://xxx/your-top-bg.png', // 顶部背景图 endBgImage:'', // 可选：滚动到顶后切成另一张图 changeDistance:150, // 滚动 150px 后完全不透明 useOpacity:true}};},mounted(){// 如果外层是 window 滚动，而不是 div 滚动，则需要监听 window // window.addEventListener('scroll', this.onWindowScroll,{passive:true});},beforeDestroy(){// window.removeEventListener('scroll', this.onWindowScroll);}, methods:{onScroll(e){this.scrollTop=e.target.scrollTop;},onWindowScroll(){this.scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;},onBack(){this.$router.go(-1);}}};</script><style scoped>.page{position: relative;height: 100vh;overflow-y: auto;/* 这里用自身滚动作为例子 */}.page-content{padding-top: 46px;/* 留出 NavBar 高度，防止内容被挡住 */}.block{height: 80px;border-bottom: 1px solid#eee;line-height: 80px;text-align: center;}</style>