微信小程序 自定义头部导航栏 navigationStyle

navigationStyle

要用自定义的导航栏只需要在app.json中配置


app.json

目前微信小程序不支持单个页面设置(现在支持了,本文章仅供参考),一旦在要决定使用自定义导航栏,那么每个页面都需要设置,为了方便我就将其写成了一个组件:

组件目录:


组件目录

index.wxml文件:

<view class='nav-wrap' style='height: {{height*2 + 20}}px;'>
    // 导航栏 中间的标题
  <view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
      // 导航栏  左上角的返回按钮 和home按钮
      //  其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏,首页不显示
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
       //左上角的返回按钮,wx:if='{{!share}}'空制返回按钮显示
       //从分享进入小程序时 返回上一级按钮不应该存在
      <view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/imgs/back-pre.png' mode='aspectFill' class='back-pre'></image>
      </view>
      <view class='navbar-v-line' wx:if='{{!share}}'></view>
      <view bindtap='_backhome'>
        <image src='/imgs/back-home.png' mode='aspectFill' class='back-home'></image>
      </view>
    </view>
  </view>
</view>

index.wxss文件:

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background: #fff;
  color: #000;
  z-index: 9999999;
}
/* 标题要居中 */
.nav-title {
  position: absolute;
  text-align: center;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
  font-weight: 600;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.navbar-v-line {
  width: 1px;
  height: 32rpx;
  background-color: #e5e5e5;
}

.back-pre, .back-home {
  width: 32rpx;
   height: 36rpx;
  margin-top: 4rpx;
  padding: 10rpx;
}
.nav-capsule .back-home {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}
  

index.json文件(自定义组件必须):

{
  "component": true
}

index.js文件:

const app = getApp()
Component({
  properties: {
    navbarData: {   //navbarData   由父页面传递的数据,变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {}
    }
  },
  data: {
    height: '',
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: 1
    }
  },
  attached: function () {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定义导航栏的高度   方便对齐
    this.setData({
      height: app.globalData.height
    })
  },
  methods: {
  // 返回上一页面
    _navback() {
      wx.navigateBack()
    },
  //返回到首页
    _backhome() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  }

}) 

app.js 文件:

//app.js
App({
  onLaunch: function (options) {
    // 判断是否由分享进入小程序
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };
    //获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
    //这个最初我是在组件中获取,但是出现了一个问题,当第一次进入小程序时导航栏会把
    //页面内容盖住一部分,当打开调试重新进入时就没有问题,这个问题弄得我是莫名其妙
    //虽然最后解决了,但是花费了不少时间
    wx.getSystemInfo({
      success: (res) => {
        this.globalData.height = res.statusBarHeight
      }
    })
  },

  globalData: {
    share: false,  // 分享默认为false
    height: 0,
  }
  
})

app.wxss文件:

/**app.wxss**/
pages {
  position: relative;
  z-index: 9999998;
  background: #fff;
}

如何使用自定义导航栏:
文件目录图


文件目录图

在微信小程序页面中:
pages文件夹index.wxml文件:

// 引入自定义组价。'navbar-data'中navbar是自定义名字,决定了组件中'navbarData'的名字
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>

<view class='home-page' style='margin-top: {{height}}px'>
  home page
</view>

pages文件夹index.json文件中(声明使用的组件,和组件的地址):

{
  "usingComponents": {
    "nav-bar": "/commpents/navbar/index"
  }
}

pages文件夹index.js文件:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  // 组件所需的参数
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '我的主页', //导航栏 中间的标题
    },

    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20 ,   
  },
  onLoad() {
    console.log(this.data.height)
  }
})

pages文件夹index.wxss文件:

/**index.wxss**/
.home-page {
  height: 160rpx;
  width: 100%;
  border: 1rpx solid red;
  font-size: 60rpx;
}

由自定义组件引发的一些问题,1.下拉刷新:当页面内容高度不够屏幕高度时,ios的下拉刷新将会出现----拉下来,上不去了,也是偶尔出现。解决方法就是页面设置个最小高度,精准一点就是页面的高度 + 下拉刷新时顶部内容距离顶部的高度。

  1. 我忘了。。。。

各位如果有更好的,请告诉我

推荐阅读更多精彩内容