更新记录

1.0.0（2026-07-05） 下载此版本

• Initial release
• Added reusable bottom navigation component
• Added scaffold container component
• Added configurable notch generation
• Added adaptive layout support

平台兼容性

uni-app(5.07)

uni-app x(5.07)

其他

Ryan Common Bottom Navigation

An iOS-style capsule bottom navigation component for uni-app, with a floating center action button, active pill background, scaffold container, safe-area support, and configurable notch geometry.

Exported component names:

• RyanArcNotchBottomNav
• RyanArcNotchBottomNavScaffold

Components

• ryan-arc-notch-bottom-nav
• ryan-arc-notch-bottom-nav-scaffold

Features

• Reusable bottom navigation for uni-app projects
• Floating center action button with notch-matched shell
• Active capsule background that follows the selected tab
• Count badge and dot badge support
• Width-based responsive scaling for different device sizes
• Bottom safe-area handling for mini program and mobile devices
• scaffold wrapper for page-switching scenarios
• Configurable shell notch and layout parameters
• Optional bottom offset for raising the whole navigation visually

Install

Plugin id:

arc-notch-bottom-nav

Place the module in:

uni_modules/arc-notch-bottom-nav

Basic Usage

<template>
    <ryan-arc-notch-bottom-nav
        :items="items"
        :current-index="currentIndex"
        :center-action="centerAction"
        :layout="layout"
        :bottom-offset="24"
        @change="handleChange"
        @centerTap="handleCenterTap"
    />
</template>

Scaffold Usage

<template>
    <ryan-arc-notch-bottom-nav-scaffold
        :items="items"
        :pages="pages"
        :current-index="currentIndex"
        :center-action="centerAction"
        :layout="layout"
        :content-padding-bottom="232"
        :bottom-offset="24"
        @change="handleChange"
    >
        <template #page="{ page }">
            <view class="page-content">
                <text>{{ page.title }}</text>
            </view>
        </template>
    </ryan-arc-notch-bottom-nav-scaffold>
</template>

Mini Program Notes

For mini program targets such as WeChat Mini Program:

• Use the #page slot to render page content.
• Do not rely on Vue dynamic components like <component :is="..."> inside mini program templates.
• The navigation automatically switches to fixed positioning when absolute is enabled, so it stays above page content more reliably.

Item Format

[
    {
        id: 'bookshelf',
        label: 'Bookshelf',
        inactiveIcon: '/static/icons/book.svg',
        activeIcon: '/static/icons/book-fill.svg',
        badge: { type: 'count', value: 8 }
    }
]

Page Format

[
    {
        title: 'Bookshelf',
        description: 'Book shelf home',
        icon: '/static/icons/book-fill.svg'
    }
]

Props

ryan-arc-notch-bottom-nav

• items: navigation item array
• value / currentIndex: active tab index
• centerAction: center button config object
• shellInset: horizontal inset of the navigation shell
• theme: color and background theme overrides
• layout: size, spacing, notch, and scaling overrides
• bottomOffset: raises the whole navigation upward by the given rpx
• absolute: whether the navigation is positioned independently at the bottom

ryan-arc-notch-bottom-nav-scaffold

• pages: page config array
• contentPaddingBottom: extra bottom padding reserved for content area
• bottomOffset: passes through to the inner navigation
• absoluteNavigation: whether the navigation stays independently positioned

Events

• input
• update:currentIndex
• itemTap
• change
• centerTap

Layout Configuration

You can control the shell geometry and spacing through the layout prop:

layout: {
    height: 172,
    shellHeight: 124,
    maxWidth: 702,
    notchDepth: 10,
    notchShoulderLeft: 139,
    notchShoulderCurveLeft: 157,
    notchArcStartX: 167,
    notchArcEndX: 223,
    notchShoulderCurveRight: 233,
    notchShoulderRight: 251,
    notchArcRadius: 38,
    centerGap: 128,
    centerButtonSize: 112
}

Increase notchDepth to make the center indentation deeper. Adjust bottomOffset, shellInset, and contentPaddingBottom together when fine-tuning the example layout.

Visual Notes

• The shell shadow has been removed from the default asset for a cleaner bottom edge.
• The component accounts for bottom safe area insets automatically.
• On narrow devices, the navigation scales from the actual rendered width rather than a fixed minimum ratio.

Optional Static Asset

If you prefer a static shell background image instead of generated SVG, use:

uni_modules/arc-notch-bottom-nav/static/nav-shell.svg