vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码_vue.js_

.mallHead ::v-deep.van-nav-bar{   background: none;   .van-icon-arrow-left{     color:#fff !important;   }   .van-nav-bar__title{     color:#fff;   } } .mallHead ::v-deep.van-nav-bar::after{   border: 0; } .menuActive{   box-shadow: none;   background:#fff;   width: 100%;   position: fixed;   top: 92px;   left: 0;   z-index: 1; }

data(){ return { style:null, indexTop:0,// 滚动条高度 amountValue:0, amountOption:[ { text: '兑换量从高到底', value: 0 }, { text: '积分从低到高', value: 1 }, { text: '积分从高到低', value: 2 }, ], ....... } }

mounted(){ window.addEventListener('scroll', this.handleScroll,true); }, destroyed() { window.removeEventListener('scroll', this.handleScroll); },

handleScroll(){ this.indexTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 计算出移动位置 const opacity = Math.abs(Math.round(this.indexTop)) / 100; // 根据位置移动动态设置背景透明度 this.style = { background: `rgba(253,85,39,${opacity})`}; }