微信小程序自定义导航的方法

本文实例为大家分享了微信小程序自定义导航的具体代码，供大家参考，具体内容如下在app.js中获取状态栏信息和胶囊按钮信息onLaunch(){//展示本地存储能力constlog...

本文实例为大家分享了微信小程序自定义导航的具体代码，供大家参考，具体内容如下

在app.js中获取状态栏信息和胶囊按钮信息

onLaunch() {
  // 展示本地存储能力
  const logs = wx.getStorageSync('logs') || []
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)
  // 获取系统信息
 this.globalData.systemInfo = wx.getSystemInfoSync();
 // 获取状态栏高度
 this.globalData.statusBarHeight = this.globalData.systemInfo.statusBarHeight
 // 胶囊按钮位置信息
 this.globalData.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
 // 获取导航栏高度
 this.globalData.navbarHeight = this.globalData.menuButtonInfo.bottom + (this.globalData.mpythonenuButtonInfo.top - this.globalData.statusBarHeight)
},

globalData: {
  statusBarHeight: '',
  menuButtonInfo: {},
  naVBArHeight:'',
  systemInfo:''编程客栈
 },

导航栏高度为胶囊底部位置+（胶囊顶部位置-状态栏高度）

将导航栏封装成组件

navigation-bar.js

properties: {
 // 是否显示返回箭头
  showBackArrow: {
    type: Boolean,
    value: true
  },
  // 是否自定义导航栏标题
  customTitle: {
    type: Boolean,
    value: false
  },
  // 导航栏标题
  title: {
    type: String,
    value: 'weixin'
  },
  // 是否自定义返回方法
  customBack: {
    type: Boolean,
    value: false
  }
},
data: {
 navBarHeight:getApp().globalData.navBarHeight,
  statusBarHeight:getApp().globalData.statusBarHeight,
  menuButtonInfo:getApp().globalData.menuButtonInfo
},
methods: {
  /** 点击返回按钮 */
  back() {
    if (this.data.customBack) {
      this.triggerEvent('back')
    } else {
      wx.navigateBack({
        delta: 0,
      })
    }
  },
  /** 点击导航栏标题事件 */
  clickTitle(){
    this.triggerEvent('clickTitle')
  },
}

navigation-bar.wXML

<view class="nav-bar" style="height:{{navBarHeight}}px;">
  <view style="height:{{statusBarHeight}}px;"></view>
  <view style="height:{{navBarHeight-statusBarHeight}}px;dEEHrwidth:{{menuButtonInfo.left}}px;" class="nav-box">
    <view class="back-arrow" wx:if="{{showBackArrow}}">
      <van-icon name="arrow-left" color="#262626" size="40rpx" bindtap="back"></van-icon>
    </view>
    <view class="nav-title" style="width: {{showBackArrow?'calc(100% - 40rpx)':'100%'}};">
      <text wx:if="{{!customTitle}}" dEEHrbindtap="clickTitle">{{title}}</text>
      <slot wx:if="{{customTitle}}"></slot>
    </view>
  </view>
</view>
<view style="height:{{navBarHeight}}px;"></view>

navigation-bar.wxss

.nav-bar{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 1000000;
}

.nav-box{
  padding: 0 20rpx;
  display: Flex;
  align-items: center;
}

.back-arrow{
  width: 60rpx;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 4rpx;
}

.nav-title{
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 36rpx;
  color: #262626;
  font-weight: 600;
}

使用

app.js

"window": {
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "navigation-bar":"/components/navigation-bar/navigation-bar",
  }

.wxml

<navigation-bar title="打卡" customBack bind:back="backWorkPage"></navigation-bar>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。