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

一只开心鸭！

已于 2024-01-26 11:56:54 修改

阅读量3.1k

点赞数 4

分类专栏： uniapp vue 文章标签：前端 html javascript

于 2022-08-12 14:08:37 首次发布

本文链接：https://blog.csdn.net/oneya1/article/details/126303038

版权

vue 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

uniapp

16 篇文章 0 订阅

订阅专栏

效果:

实现:

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