快捷導航

微信小程序自定義頂部導航欄并適配不同機型實例詳解

更新時間：2023年12月15日 10:21:39 作者：Front_Yue

這篇文章主要為大家介紹了微信小程序開發(fā)自定義頂部導航欄并適配不同機型的實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前言

在小程序中，頂部導航欄是一個非常重要的組件，它不僅可以方便用戶進行頁面切換，還可以提高用戶體驗。默認情況下，小程序的頂部導航欄是由系統(tǒng)自動生成的，我們只能修改一些基本的樣式，如背景色、文字顏色等。但是，如果想要實現(xiàn)更加復雜的樣式，如自定義圖標、自定義背景等，而且在不同的手機屏幕上，導航欄的高度和樣式也可能有所不同。因此，我們需要自定義頂部導航欄，以滿足我們的設(shè)計需求和用戶體驗。

因此本篇博客將介紹如何在小程序中自定義頂部導航欄，并適配不同的手機機型。

一、為什么要自定義頂部導航欄？

自定義頂部導航欄的好處有以下幾點：

提高用戶體驗：自定義頂部導航欄可以讓用戶更加方便地進行頁面切換和操作，提高用戶體驗。
增強品牌形象：自定義頂部導航欄可以讓品牌形象更加突出，讓用戶更容易記住品牌。
增加頁面交互性：自定義頂部導航欄可以增加頁面交互性，讓用戶更容易進行頁面操作。

二、自定義頂部導航欄基本思路

將系統(tǒng)自動生成的頂部導航欄隱藏
創(chuàng)建一個自定義導航欄組件，包含導航欄的樣式和交互邏輯。
在需要使用導航欄的頁面中引入自定義導航欄組件。
根據(jù)不同機型的屏幕尺寸和分辨率，調(diào)整導航欄的樣式和布局。
為導航欄添加交互功能，如點擊導航項切換頁面等。
在需要使用導航欄的頁面中，通過傳遞參數(shù)的方式，定制導航欄的樣式和功能。

三、自定義頂部導航欄實現(xiàn)過程

在 app.json 文件中設(shè)置 navigationStyle 為 custom，表示使用自定義導航欄。

{
  "pages": [
    "pages/index/index",
    "pages/mine/index",
    "pages/tool/index",
    "pages/study/index"
  ],
  "window": {
    "navigationStyle": "custom",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#6eac46",
    "borderStyle": "black",
    "backgroundColor": "#f5f5f5",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabBar/home.png",
        "selectedIconPath": "static/tabBar/home-select.png",
        "text": "首頁"
      },
      {
        "pagePath": "pages/mine/index",
        "iconPath": "static/tabBar/mine.png",
        "selectedIconPath": "static/tabBar/mine-select.png",
        "text": "我的"
      }
    ]
  },
}

在頁面的組件文件中添加自定義導航欄組件。

<template>
	<view class="uni-pages">
         <!-- 自定義背景色，支持漸變色 -->
		<view class="navigation" :style="{'background':bgcolor}">
             <!-- 自適應(yīng)不同的手機機型，導航頂部留白部分 -->
			<view class="nav--bar-top" :style="{'height':menuButton.top +'px'}"></view>
			<view class="nav-bar-inner">
                 <!-- 導航左邊部分，是否顯示操作膠囊 -->
				<view class="image-box" v-if="control"
					:style="{'height':menuButton.height+'px','width':menuButton.width+'px'}">
					<image class="image" src="@/static/components/返回.png" @click="clickBack"></image>
					<view class="line"></view>
					<image class="image" src="@/static/components/首頁.png" @click="clickHome"></image>
				</view>
				<view class="base-box" 
                     :style="{'height':menuButton.height+'px','width':menuButton.width+'px'}" v-else></view>
                <!-- 中間文字部分，可設(shè)置字體顏色 -->
				<view class="title" :style="'color:'+ color+';'">{{title}}</view>
                <!-- 右邊部分，占據(jù)小程序系統(tǒng)膠囊位置 -->
				<view class="base-box" 
                     :style="{'height':menuButton.height+'px','width':menuButton.width+'px'}"></view>
			</view>
            <!-- 設(shè)置膠囊離內(nèi)容距離 -->
			<view class="nav-bar-buttom" style="height: 8px;"></view>
		</view>
	</view>
</template>

說明：

本人是在uniapp中開發(fā)的，如果你使用的是小程序，需將部分指令，標簽和事件進行更改。
該自定義頂部導航欄支持自定義背景色，文字以及文字顏色，左側(cè)操作按鈕是否顯示。
其中image-box使用的圖片為返回和首頁，用于返回上一步和回到首頁。

在頁面的 JavaScript文件中定義自定義導航欄組件的行為

import {onMounted,ref} from "vue";
//獲取父組件傳遞的自定義屬性值
const props = defineProps({
    title: {
        type: String,
        default: "IT-TOOL",
    },
    control: {
        type: Boolean,
        default: false,
    },
    bgcolor: {
        type: String,
        default: "#6cab45",
    },
    color: {
        type: String,
        default: "#fff",
    }
})
// 獲取不同機型膠囊按鈕對應(yīng)的屬性值（寬高，膠囊距離頂部的距離）
const menuButton = ref(uni.getMenuButtonBoundingClientRect());
const prevLength = ref(0)
onMounted(() => {
    getPrevPage();
})
//獲取跳轉(zhuǎn)頁面的路徑，用于返回操作
const getPrevPage = () => {
    const page = getCurrentPages()
    prevLength.value = page.length;
    if (page.length == 2) {
        uni.setStorageSync("prevPage", page[0].$page.fullPath)
    }
}
// 膠囊--返回
const clickBack = () => {
    if (prevLength.value > 2) {
        uni.navigateBack()
    } else {
        uni.switchTab({
            url: uni.getStorageSync("prevPage"),
            success: function() {
                var page = getCurrentPages().pop();
                if (page == undefined || page == null) {
                    return
                }
                page.onLoad();
            }
        });
    }
}
// 膠囊--首頁
const clickHome = () => {
    uni.switchTab({
        url: "/pages/index/index"
    });
}

說明：以上JavaScript代碼采用vue3+setup語法，如果使用原生小程序語法，請注意更改。

在頁面的CSS文件中設(shè)置自定義導航欄組件的樣式

.uni-pages {
    .navigation {
        .nav-bar-inner {
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 8px;
            .image-box {
                display: flex;
                justify-content: space-around;
                align-items: center;
                border: 1px solid rgba(#000, 0.1);
                border-radius: 16px;
                background-color: rgba(#fff, 0.6);
                .line {
                    width: 1px;
                    height: 26px;
                    background-color: rgba(#fff, 0.3);
                }
                .image {
                    width: 22px;
                    height: 22px;
                }
            }
            .title {
                color: #000;
                font-weight: 500;
                font-size: 28rpx;
            }
        }
        .nav-bar-buttom {
            height: 10rpx;
        }
    }
}

四、自定義頂部導航效果展示

總結(jié)

本文主要介紹了微信小程序自定義頂部導航欄的相關(guān)知識，包括其概念、作用、設(shè)計原則、實現(xiàn)方法和技巧等。通過閱讀本文，讀者可以了解到自定義導航欄在小程序中的重要性和應(yīng)用價值，掌握自定義導航欄的設(shè)計原則和實現(xiàn)方法，并學會如何根據(jù)實際需求進行靈活定制。

自定義導航欄是小程序中不可或缺的一個組件，它能夠為用戶提供清晰的頁面結(jié)構(gòu)和功能指引，提高用戶體驗和操作效率。在實現(xiàn)自定義導航欄時，需要考慮不同機型的適配問題，確保導航欄在不同設(shè)備上都能正常顯示和使用。同時，還需要注意導航欄的設(shè)計風格與頁面整體風格的一致性，以及導航項的布局和交互方式等細節(jié)問題。

總之，自定義頂部導航欄是小程序開發(fā)中一個重要的知識點，掌握好

以上就是微信小程序自定義頂部導航欄并適配不同機型實例詳解的詳細內(nèi)容，更多關(guān)于微信小程序?qū)Ш綑诘馁Y料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: