小程序自定义顶部导航

项目中，UI提供的的设计图是这样的，这里就需要自定义导航栏了。

自定义导航又两种情况，一种是全局配置，一种是单页面配置。

先说下两种配置方法：

1.全局配置navigationStyle要求：

• 调试基础库>=1.9.0
• 微信客户端>=6.6.0

需要在app.json中进行如下配置：使用自定义导航的组件，设置自定义导航

{
  "usingComponents": {
    "navigationBar": "/component/nav-top/nav-top"
  }
  "window": {
    "navigationStyle": "custom"
  } 
}

2.单页面配置navigationStyle要求

• 调试基础库>=2.4.3
• 微信客户端版本>=7.0.0

需要使用自定义导航的页面.json

{
  "navigationStyle": "custom",
   "usingComponents": {
    "navigationBar": "/component/nav-top/nav-top"
  }
}

我这里只需要在首页使用该自定义导航。实现如下：

自定义导航组件.wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
  <view style="{{'height: ' + statusBarHeight}}"></view>
  <view class='title-container'>
    <view class='title'>{{text}}</view>
    <!-- 搜索 -->
    <view class="search">
      <image class="search_img" src="../../images/icon_so.png" ></image>
      <input placeholder="请输入搜索内容" bindinput="watch"  value="{{txt}}" bindconfirm='search'/>
    </view>
  </view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>

注意：

• 一般使用自定义导航栏时，下拉页面，导航栏也随着会下拉，这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight，所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度。

• statusBarHeight：用来获取手机状态栏的高度，这个需要在全局app.js中通过wx.getSystemInfoSync()[‘statusBarHeight’]获取，

• navigationBarHeight + 默认的高度：用来设定整个导航栏的高度

自定义导航组件.wxss

.navbar {
  width: 100%;
  background-color: #30CAB2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.title-container {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}
.title {
  color: white;
  position: absolute;
  top: 6px;
  height: 30px;
  line-height: 30px;
  font-size: 36rpx;
  left:30rpx;
}
.search {
  position: absolute;
  left:119rpx;
  top:13rpx;
  width:416rpx;
  height:60rpx;
  border-radius:31rpx;
  overflow: hidden;
} 
.search input {
  height: 60rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  vertical-align: middle;
  padding-left: 63rpx;
  background: #f2f2f2;
}

.search  .search_img{
  width: 34rpx;
  height: 34rpx;
  position: absolute;
  top: 16rpx;
  left:23rpx;
}

自定义导航组件.json

{
  "component": true,
  "usingComponents": {}
}

自定义导航组件.js

const app = getApp()

Component({

  properties: {
    text: {
      type: String,
      value: '首页'
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    inputVal: "", // 搜索框内容
    txt:null,
    statusBarHeight: app.globalData.statusBarHeight + 'px',
    navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
  },

  methods: {
    // 监听输入
    watch: function (e) {
      this.setData({
        txt: e.detail.value,
      });
    },
    //回车搜索
    search() {
      if (this.data.txt) {
        wx.navigateTo({
          url: "../filtrate_goods/filtrate_goods?type=" + this.data.txt
        })
      } else {
        wx.showToast({
          title: "请输入搜索内容",
          duration: 1000,
          icon: 'none',
        });
      }
    },
  },
})

在app.js中进行如下配置

globalData: {
  statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']
}

在需要使用自定义导航的页面的json文件中进行如下配置：使用组件

{
  "navigationStyle": "custom",
  "usingComponents": {
    "navigationBar": "/component/nav-top/nav-top"
  }
}

最后在需要使用自定义导航的页面中使用组件：

<navigationBar></navigationBar>