H5动态公共导航栏

CommonNavBar.vuetemplatedivclasscommon-nav-bar:stylenavBarStyle!-- 状态栏占位可以按项目需要删除或调整高度 --divclassstatus-bar-placeholder/div!-- 主导航栏使用 Vant NavBar --van-nav-bar :titletitle:left-textleftText:right-textrightText:left-arrowleftArrowclick-left$emit(click-left)click-right$emit(click-right):borderfalse:fixedfixed!-- 支持插槽透传 --template v-if$slots.left#leftslotnameleft/slot/templatetemplate v-if$slots.right#rightslotnameright/slot/templatetemplate v-if$slots.title#titleslotnametitle/slot/template/van-nav-bar/div/templatescriptexportdefault{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.pngendBgImage:, // 如https://xxx/yyy.pngchangeDistance:150, // 滚动 150px 完成渐变 useOpacity:true})}}, computed:{// 归一化滚动进度0 ~1progress(){const dthis.backgroundConfig.changeDistance||150;const pthis.scrollTop / d;returnp1?1:p0?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. 处理背景图片切换 // 当 progress1使用 bgImageprogress1时使用 endBgImage若有if(bgImage||endBgImage){// 你也可以根据 progress 做淡入淡出这里做简单切换 const useEndImgendBgImagethis.progress1;style.backgroundImageurl(${useEndImg ? endBgImage:bgImage});}//2. 处理背景色 / 透明度渐变if(useOpacity){//2.1使用 endColor但通过透明度从0~1渐变 const endRGBAthis.hexToRgba(endColor||#ffffff, this.progress);style.backgroundColorendRGBA;}else{//2.2在 startColor 和 endColor 之间做颜色插值 style.backgroundColorthis.mixColor(startColor, endColor, this.progress);}returnstyle;}}, methods:{/** *16进制颜色转 rgba * hex:#RRGGBB/#RGB*/ hexToRgba(hex, alpha1){if(!hex)returnrgba(255,255,255,${alpha});letr255, g255, b255;letnormalizedhex.replace(#,);if(normalized.length3){rparseInt(normalized[0] normalized[0],16);gparseInt(normalized[1] normalized[1],16);bparseInt(normalized[2] normalized[2],16);}elseif(normalized.length6){rparseInt(normalized.slice(0,2),16);gparseInt(normalized.slice(2,4),16);bparseInt(normalized.slice(4,6),16);}returnrgba(${r},${g},${b},${alpha});}, /** * 颜色插值在 startColor 和 endColor 之间按照 t(0~1)做线性渐变 */ mixColor(start, end, t){const parseHex(hex){letnormalizedhex.replace(#,);if(normalized.length3){normalizednormalized .split().map((c)c c).join();}const rparseInt(normalized.slice(0,2),16);const gparseInt(normalized.slice(2,4),16);const bparseInt(normalized.slice(4,6),16);return{r, g, b};};const sparseHex(start||#ffffff);const eparseHex(end||#ffffff);const rMath.round(s.r (e.r - s.r)* t);const gMath.round(s.g (e.g - s.g)* t);const bMath.round(s.b (e.b - s.b)* t);returnrgb(${r},${g},${b});}}};/scriptstyle scoped.common-nav-bar{/* 外层容器高度状态栏 van-nav-bar 高度 * 按项目情况可以自定义也可以不要 status-bar-placeholder只用 NavBar 自己的高度。 */}/* 顶部状态栏占位可在 APP 内嵌 H5 时按机型改成环境变量高度 */ .status-bar-placeholder{height:0;/* 如果需要留出状态栏高度可改成20/24等 */}/styleHome.vuetemplatedivclasspagescroll.passiveonScrollrefscrollContainercommon-nav-bar :title首页:scroll-topscrollTop:background-confignavBgConfigclick-leftonBack/!-- 实际内容 --divclasspage-content!-- 模拟内容占位 --div v-fori in 50:keyiclassblock内容{{i}}/div/div/div/templatescriptimportCommonNavBar 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.scrollTope.target.scrollTop;},onWindowScroll(){this.scrollTopwindow.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;},onBack(){this.$router.go(-1);}}};/scriptstyle 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