直播软件app开发，导航条根据位置移动实现定位、颜色过渡动画效果

直播软件app开发，导航条根据位置移动实现定位、颜色过渡动画效果

1.navbar、tabbar顶部导航过渡效果、颜色过渡；

 

1

<div class="mallHead"><br>        <van-nav-bar :title="titleName" fixed @click-left="onClickLeft" :style="style" safe-area-inset-top><br>          <template #left><br>            <van-icon name="arrow-left" size="22px" color="#024EE0" /><br>          </template><br>        </van-nav-bar><br>        <div class="top"></div><br></div><br><div :class="indexTop>220?'menuActive':'dropdown-menu'" ><br>        <van-dropdown-menu><br>          <van-dropdown-item v-model="amountValue" :options="amountOption" /><br>          <van-dropdown-item v-model="integralValue" :options="integralOption" /><br>          <van-dropdown-item v-model="goodsValue" :options="goodsOption" /><br>        </van-dropdown-menu><br></div>

​

css样式 

 

1

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

 

 

 2.定义data

 

1

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

 

3.methods方法定义 

 

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

 

定义handleScroll方法

 

Math.abs(Math.round(this.indexTop)) / 100; 自行定义

 

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

 

 

以上就是 直播软件app开发，导航条根据位置移动实现定位、颜色过渡动画效果，更多内容欢迎关注之后的文章