微信小程序自定义导航的具体代码如下

在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>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 一文解决vue如何设置请求头实现页面登录

  这篇文章主要介绍了通过vue如何设置header,每个项目都有头部但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部，那么怎么配置公共头部header，下面小编通过实例代码详细讲解，需要的朋友可以参考下

• 如何解释JS柯里化，对柯里化的简单理解是怎样

  这篇文章主要为大家介绍了闭包结合递归等于柯里化的原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 如何实现鼠标拖动图片功能？jQuery实现代码详解

  jQuery如何实现鼠标拖动图片？鼠标拖动图片就与鼠标拖动桌面软件图标差不多，也就是图片的位置随着鼠标的移动位置而改变。这篇文章就通过详细的实例代码给大家介绍一下jQuery如何实现鼠标拖动图片的功能。

• socket.io如何进行安装和使用，能做什么

  1、安装socket.ionpminstallsocket.io2、创建服务端代码server.jsvarapp=require('http').createServer(handler),io=require('socket.io').listen(app),fs=require('fs')app.listen(8080);io.set

• vue如何实现登陆跳转的功能？

  vue如何实现登陆跳转的功能？现在很多网站和APP都需要注册登录使用，因此我们常常会需要实现登陆跳转的功能，下面就给大家分享下vue框架实现登陆跳转的功能的代码，效果如下，感兴趣的朋友可以参考。