微信小程序自定义顶部导航栏并适配不同机型实例详解
作者：Front_Yue
这篇文章主要为大家介绍了微信小程序开发自定义顶部导航栏并适配不同机型的实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
前言
在小程序中，顶部导航栏是一个非常重要的组件，它不仅可以方便用户进行页面切换，还可以提高用户体验。默认情况下，小程序的顶部导航栏是由系统自动生成的，我们只能修改一些基本的样式，如背景色、文字颜色等。但是，如果想要实现更加复杂的样式，如自定义图标、自定义背景等，而且在不同的手机屏幕上，导航栏的高度和样式也可能有所不同。因此，我们需要自定义顶部导航栏，以满足我们的设计需求和用户体验。
因此本篇博客将介绍如何在小程序中自定义顶部导航栏，并适配不同的手机机型。
一、为什么要自定义顶部导航栏？
自定义顶部导航栏的好处有以下几点：
- 提高用户体验：自定义顶部导航栏可以让用户更加方便地进行页面切换和操作，提高用户体验。
- 增强品牌形象：自定义顶部导航栏可以让品牌形象更加突出，让用户更容易记住品牌。
- 增加页面交互性：自定义顶部导航栏可以增加页面交互性，让用户更容易进行页面操作。
二、自定义顶部导航栏基本思路
- 将系统自动生成的顶部导航栏隐藏
- 创建一个自定义导航栏组件，包含导航栏的样式和交互逻辑。
- 在需要使用导航栏的页面中引入自定义导航栏组件。
- 根据不同机型的屏幕尺寸和分辨率，调整导航栏的样式和布局。
- 为导航栏添加交互功能，如点击导航项切换页面等。
- 在需要使用导航栏的页面中，通过传递参数的方式，定制导航栏的样式和功能。
三、自定义顶部导航栏实现过程
- 在 app.json 文件中设置 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}">
<!-- 自适应不同的手机机型，导航顶部留白部分 -->
<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>
<!-- 中间文字部分，可设置字体颜色 -->
<view class="title" :style="'color:'+ color+';'">{{title}}</view>
<!-- 右边部分，占据小程序系统胶囊位置 -->
<view class="base-box"
:style="{'height':menuButton.height+'px','width':menuButton.width+'px'}"></view>
</view>
<!-- 设置胶囊离内容距离 -->
<view class="nav-bar-buttom" style="height: 8px;"></view>
</view>
</view>
</template>说明：
- 本人是在uniapp中开发的，如果你使用的是小程序，需将部分指令，标签和事件进行更改。
- 该自定义顶部导航栏支持自定义背景色，文字以及文字颜色，左侧操作按钮是否显示。
- 其中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",
}
})
// 获取不同机型胶囊按钮对应的属性值（宽高，胶囊距离顶部的距离）
const menuButton = ref(uni.getMenuButtonBoundingClientRect());
const prevLength = ref(0)
onMounted(() => {
getPrevPage();
})
//获取跳转页面的路径，用于返回操作
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文件中设置自定义导航栏组件的样式
.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;
}
}
}四、自定义顶部导航效果展示
总结
本文主要介绍了微信小程序自定义顶部导航栏的相关知识，包括其概念、作用、设计原则、实现方法和技巧等。通过阅读本文，读者可以了解到自定义导航栏在小程序中的重要性和应用价值，掌握自定义导航栏的设计原则和实现方法，并学会如何根据实际需求进行灵活定制。
自定义导航栏是小程序中不可或缺的一个组件，它能够为用户提供清晰的页面结构和功能指引，提高用户体验和操作效率。在实现自定义导航栏时，需要考虑不同机型的适配问题，确保导航栏在不同设备上都能正常显示和使用。同时，还需要注意导航栏的设计风格与页面整体风格的一致性，以及导航项的布局和交互方式等细节问题。
总之，自定义顶部导航栏是小程序开发中一个重要的知识点，掌握好
以上就是微信小程序自定义顶部导航栏并适配不同机型实例详解的详细内容，更多关于微信小程序导航栏的资料请关注脚本之家其它相关文章！