微信小程序怎么自定義導航

這篇文章主要介紹“微信小程序怎么自定義導航”，在日常操作中，相信很多人在微信小程序怎么自定義導航問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序怎么自定義導航”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在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" >
    <view ></view>
    <view  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" >
            <text wx:if="{{!customTitle}}" bindtap="clickTitle">{{title}}</text>
            <slot wx:if="{{customTitle}}"></slot>
        </view>
    </view>
</view>
<view ></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>

到此，關于“微信小程序怎么自定義導航”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！