效果:
实现:
<u-navbar title="确认订单" :placeholder='true' :titleStyle='{color:"#fff"}' leftIconSize='40' :bgColor='rgba'
leftIconColor='#fff' @rightClick="rightClick" :autoBack="true">
</u-navbar>
export default {
data() {
retun{
rgba: 'rgba(0,0,0,0)'
}
},
// 滚动监听
onPageScroll(e) {
this.handleScroll(e.scrollTop)
},
methods:{
// 导航栏滚动显示/隐藏
handleScroll(top) {
if (top > 5) {
let opacity = top / 300
opacity = opacity > 1 ? 1 : opacity
this.rgba = `rgba(167, 223, 0, ${opacity})`;
} else {
this.rgba = 'rgba(0,0,0,0)'
}
},
}
}