uniapp自定义导航栏固定顶部，滚动时样式变化

运动减肥

已于 2024-04-23 11:57:16 修改

阅读量786

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2024-04-23 11:42:46 首次发布

本文链接：https://blog.csdn.net/weixin_41521961/article/details/138118464

本文介绍了如何在HTML和JavaScript中使用UView组件库的navbar组件创建一个带有颜色渐变效果的自定义导航栏，通过滚动事件实时改变导航栏背景、标题和图标颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义导航栏使用uview组件库的navbar组件：

html:

<u-navbar title="标题" class="navBox" :background="navStyleInfo.navBarBg" 
:border-bottom="false" :back-icon-color="navStyleInfo.backIconColor" 
:title-color="navStyleInfo.titleColor" :is-fixed="true">
</u-navbar>

js:

data() {
 return {
        currentPageName: '',
        navStyleInfo:{
          navBarBg: {
            backgroundColor: "rgba(255, 255, 255,0)",
          },
          titleColor:"rgba(255, 255, 255,255)",
          backIconColor:"rgba(255, 255, 255,255)"
        }
      }
  },
onPageScroll : function(e) { 
     this.changeNavBarBg(e.scrollTop);
},
methods: {
      changeNavBarBg(scrollY){
        let num = 0.00625*scrollY;
        if(num > 1){
          num = 1
        }else{
          num = num.toFixed(2)
        }
        if(scrollY>=80){
          this.navStyleInfo={
            navBarBg:{
              background:'rgba(255, 255, 255,' + num +')',
            },
            titleColor:'rgba(51, 51, 51,' + num +')',
            scanIconColor:'rgba(41,121, 255,' + num +')',
            backIconColor:'rgba(51, 51, 51,' + num +')',
          }
        }
        else{
          let toTopNum =  0.0125*(80-scrollY);
          if(toTopNum<0.2)toTopNum = 0.2;
          this.navStyleInfo={
            navBarBg:{
              background:'rgba(255, 255, 255,' + num +')',
            },
            titleColor:'rgba(255, 255, 255,' + toTopNum +')',
            scanIconColor:'rgba(255,255, 255,' + toTopNum +')',
            backIconColor:'rgba(255, 255, 255,' + toTopNum +')',
          }
        }
      }},