微信小程序自定义顶部导航栏并适配不同机型

简介: 自定义导航栏是小程序中不可或缺的一个组件,它能够为用户提供清晰的页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航栏时,需要考虑不同机型的适配问题,确保导航栏在不同设备上都能正常显示和使用。同时,还需要注意导航栏的设计风格与页面整体风格的一致性,以及导航项的布局和交互方式等细节问题。

前言

Snipaste_2023-12-10_00-11-30.png

在小程序中,顶部导航栏是一个非常重要的组件,它不仅可以方便用户进行页面切换,还可以提高用户体验。默认情况下,小程序的顶部导航栏是由系统自动生成的,我们只能修改一些基本的样式,如背景色、文字颜色等。但是,如果想要实现更加复杂的样式,如自定义图标、自定义背景等,而且在不同的手机屏幕上,导航栏的高度和样式也可能有所不同。因此,我们需要自定义顶部导航栏,以满足我们的设计需求和用户体验。

因此本篇博客将介绍如何在小程序中自定义顶部导航栏,并适配不同的手机机型。

正文内容

一、为什么要自定义顶部导航栏?

自定义顶部导航栏的好处有以下几点:

  1. 提高用户体验:自定义顶部导航栏可以让用户更加方便地进行页面切换和操作,提高用户体验。
  2. 增强品牌形象:自定义顶部导航栏可以让品牌形象更加突出,让用户更容易记住品牌。
  3. 增加页面交互性:自定义顶部导航栏可以增加页面交互性,让用户更容易进行页面操作。

二、自定义顶部导航栏基本思路

  1. 将系统自动生成的顶部导航栏隐藏
  2. 创建一个自定义导航栏组件,包含导航栏的样式和交互逻辑。
  3. 在需要使用导航栏的页面中引入自定义导航栏组件。
  4. 根据不同机型的屏幕尺寸和分辨率,调整导航栏的样式和布局。
  5. 为导航栏添加交互功能,如点击导航项切换页面等。
  6. 在需要使用导航栏的页面中,通过传递参数的方式,定制导航栏的样式和功能。

三、自定义顶部导航栏实现过程

  1. 在 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": "我的"
      }
    ]
  },
}
  1. 在页面的组件文件中添加自定义导航栏组件。
<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>

说明:

  1. 本人是在uniapp中开发的,如果你使用的是小程序,需将部分指令,标签和事件进行更改。
  2. 该自定义顶部导航栏支持自定义背景色,文字以及文字颜色,左侧操作按钮是否显示。
  3. 其中image-box使用的图片为返回和首页,用于返回上一步和回到首页。
3. 在页面的 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语法,如果使用原生小程序语法,请注意更改。

4. 在页面的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;
        }
    }
}

四、自定义顶部导航效果展示

image.png

image.png

总结

本文主要介绍了微信小程序自定义顶部导航栏的相关知识,包括其概念、作用、设计原则、实现方法和技巧等。通过阅读本文,读者可以了解到自定义导航栏在小程序中的重要性和应用价值,掌握自定义导航栏的设计原则和实现方法,并学会如何根据实际需求进行灵活定制。

自定义导航栏是小程序中不可或缺的一个组件,它能够为用户提供清晰的页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航栏时,需要考虑不同机型的适配问题,确保导航栏在不同设备上都能正常显示和使用。同时,还需要注意导航栏的设计风格与页面整体风格的一致性,以及导航项的布局和交互方式等细节问题。

总之,自定义顶部导航栏是小程序开发中一个重要的知识点,掌握好自定义导航栏的设计和实现,能够帮助开发者更好地完成小程序的开发工作,提高小程序的质量和用户体验。

目录
相关文章
|
17天前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
223 1
|
18天前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
41 0
微信小程序:自定义关注公众号组件样式
|
3月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
103 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
3月前
|
小程序 前端开发 API
微信小程序全栈开发中的多端适配与响应式布局是一种高效的开发模式。
探讨小程序全栈开发中的多端适配与响应式布局,旨在实现统一的用户体验。多端适配包括平台和设备适配,确保小程序能在不同环境稳定运行。响应式布局利用媒体查询和弹性布局技术,使界面适应各种屏幕尺寸。实践中需考虑兼容性、性能优化及用户体验,借助跨平台框架如Taro或uni-app可简化开发流程,提升效率。
53 1
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
177 0
|
17天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
261 7
|
17天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
363 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
87 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
74 6
|
21天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
117 1