微信小程序 自定义头部导航栏 navigationStyle:custom 返回上一页按钮、返回首页按钮 自定义组件

微信小程序 自定义头部导航栏
.json 文件中加 navigationStyle:custom 顶部导航栏就会消失，只保留右上角胶囊状的按钮，
修改胶囊的颜色：胶囊体目前只支持黑色和白色两种颜色
在.josn 文件中 加上 “navigationBarTextStyle”:“white/black”

自定义导航（返回上一页按钮、返回首页按钮 自定义组件）

wxml:

<view class='nav-wrap' style='height: {{height*2 + 20}}px;background:{{navbarData.backgroundcolor}}'>
    
  <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'>
      
      
    <view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
       
       
      <view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/images/goprevico.png' mode='aspectFill' class='back-pre'>image>
      view>
      
      <view bindtap='_backhome'>
        <image src='/images/goindexico.png' mode='aspectFill' class='back-home'>image>
      view>
    view>
  view>
view>

wxss:

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */

.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  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;
}

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
      }
    })

    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    share: false, // 分享默认为false
    height: 0,
    userInfo: null
  }
})

页面使用方法：
wxml:

<view class="swiperbox">
  <navigationBar navbar-data="{{navbarData}}"  />
  <swiper class="swiper" current="{{playindex}}" vertical="true" bindchange="swiperchange">
    <swiper-item wx:for="{{videoList}}" wx:key="{{index}}" class="swiperitem {{item.back}}" >
      <video class="video" bindtap="videotap"
              src="{{item.videourl}}"
              id="{{index}}"
              loop="{{true}}"
              custom-cache="{{false}}"
              show-fullscreen-btn="{{false}}" 
              show-play-btn="{{false}}"
              show-center-play-btn="{{false}}" >
      video>
    swiper-item>
  swiper>
view>

json:

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "navigationBarTitleText": "视频详情",
  "navigationBarTextStyle": "white",
  "navigationStyle": "custom"
}

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)
  }
})

借鉴文章：https://www.jianshu.com/p/7393c800ba09
其他文章：https://blog.csdn.net/dichu2296/article/details/102233745