u-navbar自定义标题背景随着页面滑动渐变

效果:

图1
图2
图3
实现:

<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)'
        }
      },
    }
}

猜你喜欢

转载自blog.csdn.net/oneya1/article/details/126303038