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

效果:

实现:

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