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

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

在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.menuButtonInfo.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;width:{{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}}" bindtap="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>

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

查看更多关于微信小程序自定义导航的方法的详细内容...