基于原生小程序的自定义头部导航

项目需求，好多页面要自定义导航，样式还五花八门，肿么办？那就弄个头部导航组件吧！ 先上效果图

image.png

下面一组是透明和不透明切换的效果

image.png

image.png

首先，生成原生小程序四大天王

image.png

然后，我们在wxml中写页面结构，我们这里利用slot插槽，来支持导航内容的自定义填充

接下来写wxss

.flex_jus_start{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.standing_block{
  width: 100%;
  background: transparent;
}
.customer_header{
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  width: 100%;
  height: 74rpx;
  margin: auto;
  z-index: 99;
}
.customer_header .hader_box{
  padding-left: 12rpx;
}
.customer_header .no_padding{
  padding-left: 0rpx;
}
.shadow{
  box-shadow: 0 4rpx 8rpx 0 rgba(0,0,0,0.08);
}

样式根据你们自己的需要去更改，接下来我们写js文件

const app = getApp()
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    bgTransparent:{
      type:Boolean,
      value:false
    },//是否导航背景透明
    bgColor:{
      type:String,
      value:'#fff'
    },//导航背景色
    isShadow:{
      type:Boolean,
      value:false
    },//是否带底部阴影
  },
  data: {
    navBar:0,//导航栏高度
    statusBar:0,//状态栏高度
  },
  attached: function () {
    //通过微信提供的 wx.getSystemInfo()方法，拿到状态栏高度和导航栏高度
    wx.getSystemInfo({
      success: res => {
        // 状态栏高度
        let statusBarHeight = res.statusBarHeight;
        let menuButtonRect = wx.getMenuButtonBoundingClientRect()
        // 导航栏高度
        let navigationBarHeight = (menuButtonRect.top - statusBarHeight) * 2 + menuButtonRect.height;
        this.setData({
          navBar:navigationBarHeight,
          statusBar:statusBarHeight
        })
      }
    });
  }
})

这样，一个最基本的自定义头部导航组件就写完了，我们来看一下如何使用；
在json文件中，我们先引入组件

{
  "usingComponents": {
    "coustom-nav":"/components/coustom-nav/index"
  },
  "navigationStyle": "custom"
}

然后页面使用

  
    
    
      
    
    「{{shop_name}} 」的职场店铺
  

假如你想根据页面滑动来进行导航的透明与不透明显示，只需要在应用的页面这样写就可以了

//页面滑动，导航背景变化
  onPageScroll(e){
    //创建节点选择器
    let query = wx.createSelectorQuery();
    //选择id
    let that = this; 
    query.select('.custom_nav').boundingClientRect(function(rect) {
      if (e.scrollTop > rect.height) { // 页面上卷高度大于导航高度时
        that.setData({
          bgTransparent: true //导航头部颜色变为白色
        })
      } else {
        that.setData({
          bgTransparent: false  // 导航头部颜色变为透明
        })
      }
    }).exec();
  }

这样，一个自定义导航就完成了，你也可以在此基础上进行二次封装，制定更多的属性，满足你的业务需求