微信小程序:自定义导航栏

在小程序开发的时候会遇到一些页面不需要头部导航,或像淘宝的商品详情一样自定义的导航栏。那先要清楚这导航可不能写死,每种手机的导航都各不相同。

一、在app.jsonwindow对象中定义导航的样式:

小程序开发文档中说明

"window":{
  "navigationStyle": "custom"
},

这样你会发现所有页面的导航栏都不见了。如果还有其他页面需要导航栏的,那就模仿小程序的导航栏按照以下步骤。
二、首先要在app.jsonLaunch方法里面获取手机状态栏高度,全局定义导航高度navHeight

// 获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })

注意!!!全局定义导航高度navHeight!!!
我发现很多人会遇到navHeightundefined这个问题。在这里说明一下,这个navHeight需要在app.json里面定义好:

globalData: {
    userInfo: null,
    navHeight: 0
}

三、在需要导航的 页面Page拿到全局变量导航高度:

const App = getApp();
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      navH: App.globalData.navHeight
    })
  },
})

四、页面展示:

<view>
  <view class='nav bg-white' style='height:{{navH}}px'>
    <view class='nav-title'>
      首页
      <image src='../../images/back.png' mode='aspectFit' class='back' bindtap='navBack'></image> 
    </view>
  </view>
  <scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y >
    <view class='hidden'>
      <!-- 正文 -->
    </view>
  </scroll-view>
</view>

五、附上样式,可以写在app.wxss

.nav{
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}
.nav-title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family:PingFang-SC-Medium;
  font-size:36rpx;
  letter-spacing:2px;
}
.nav .back{
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
}
.bg-white{
  background-color: #ffffff;
}
.bg-gray{
  background-color: #f7f7f7;
}
.overflow{
  overflow: auto;
}
.hidden{
  overflow: hidden;
}

六、界面效果:


iphone6界面效果
iphoneX界面效果
自定义导航栏之后要加微信默认的下拉刷新会出现一个问题:下拉刷新组件会出现在导航栏上面!所以如果你需要做自定义导航栏,就需要自定义下拉刷新。下面提供luyimei微信小程序下拉刷新组件

推荐阅读更多精彩内容