【小程序】uniapp编写自定义导航栏组件

原创

已于 2022-06-24 09:51:31 修改

· 1k 阅读

5 ·

版权

文章标签：

#小程序 #前端 #javascript

于 2022-06-24 09:45:40 首次发布

本文档介绍如何在微信小程序中引入并自定义导航栏组件，包括设置`navigationStyle`属性为`custom`以实现全局或局部自定义，以及组件模板结构和方法，展示了如何通过样式实现默认插槽功能，并提供了计算头部高度的示例代码。同时，讨论了导航栏的布局、颜色和文字配置，以及返回按钮的显示和点击事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入导航栏组件时,需要前往page.js里页面配置增加"navigationStyle": "custom"的属性,放page数组对象里定义个别页面,或者放globalStyle对象里直接全局自定义
如果没有使用插槽的话，默认展示小程序默认的样式【左边距可以自己在.nav-body调整】

<template>
  <view
    class="custom-nav-head"
    :style="{
      height: headHeight + 'rpx',
      background: backgroundColor,
      color: textColor,
    }"
  >
    <view
      :style="{
        height: navHeight + 'rpx',
        'padding-top': navTop + 'rpx',
        'padding-right': navPaddingRight + 'rpx',
      }"
    >
      <!-- 小程序目前不支持插槽里放默认值，因此通过样式来实现分发的功能  -->
      <view class="default-slot">
        <slot></slot>
      </view>
      <view class="nav-body">
        <view class="left-slot">
          <slot name="left"></slot>
        </view>
        <view class="nav-body-left">
          <van-icon
            v-if="isShowBackBtn"
            name<

最低0.47元/天解锁文章