vue工程采用vant插件(使用vant插件书写app页面还是不错的)
是插件的一个吸顶bar
<template>
<van-nav-bar
title="首页"
@click-left="showMenu"
fixed
:style="navbarStyle"
>
</template>
<script>
export default {
name: "",
data() {
return {
navbarStyle:{'background-color':'rgba(58,121,218,0)!important'},
};
},
activated() {
this.navbarStyle = {'background-color':'rgba(58,121,218,0)!important'}
window.addEventListener('scroll',this.windowScroll)//添加监听窗口滚动
},
deactivated(){
window.removeEventListener('scroll',this.windowScroll)//删除窗口滚动
},
destroyed(){
window.removeEventListener('scroll',this.windowScroll)//删除窗口滚动
},
created(){
this.navbarStyle = {'background-color':'rgba(58,121,218,0)!important'}
window.addEventListener('scroll',this.windowScroll)//添加监听窗口滚动
},
methods: {
windowScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let opacity = Math.abs(Math.round(scrollTop)) / 250;
this.navbarStyle = {'background-color': `rgba(58,121,218,${opacity})!important`}//调整透明的
},
},
};
</script>
本人主栈后端,也在学习的路上,希望共同成长!理解不对的请指教。如果您绝的有用请帮我点个赞谢谢了。