更新记录

1.1.1（2026-07-19） 下载此版本

1.凸起优化

1.1.0（2026-07-17） 下载此版本

• 中间项新增 iconOnly 与 circleBackground 两种可配置样式
• 支持 centerIcon、activeCenterIcon 及独立图标尺寸
• 支持配置中间按钮圆形背景色和内边距
• 圆形背景模式统一外圆边框和内部背景颜色，并优化阴影扩散效果
• 示例使用 iconOnly 展示纯圆形人物图片

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

• 初始化 RyanArcFloatNav 组件
• 初始化 RyanArcFloatNavScaffold 页面脚手架组件
• 支持中间上凸中心按钮布局
• 支持左右 tab 分组与中间留白布局
• 支持通过动态 SVG 生成顶部凸面背景
• 支持普通导航项与中心导航项激活态
• 支持主题颜色、尺寸、曲线参数自定义
• 支持示例页面与静态图标资源
• 补充 README 使用说明与参数文档

平台兼容性

uni-app(5.01)

uni-app x(5.13)

其他

Ryan Arc Float Nav

一个适用于 uni-app 的中间上凸底部导航组件，包含：

• RyanArcFloatNav
• RyanArcFloatNavScaffold

特性

• 中间单独凸起的 center item，支持纯圆形图片、纯图标、圆形背景加中心图标
• 通过动态 SVG 生成顶部凸面背景
• 内置 safe area 适配
• 支持普通 tab 与中间 tab 的激活态
• 附带和组件结构一致的示例页面

安装路径

uni_modules/ryan-arc-float-nav

组件引入

import RyanArcFloatNavScaffold from '../../uni_modules/ryan-arc-float-nav/components/ryan-arc-float-nav-scaffold/ryan-arc-float-nav-scaffold.vue'

基础用法

<template>
    <RyanArcFloatNavScaffold
        :items="items"
        :pages="pages"
        :current-index="currentIndex"
        :layout="layout"
        @change="handleChange"
    >
        <template #page="{ page }">
            <view>{{ page.title }}</view>
        </template>
    </RyanArcFloatNavScaffold>
</template>

<script>
import RyanArcFloatNavScaffold from '../../uni_modules/ryan-arc-float-nav/components/ryan-arc-float-nav-scaffold/ryan-arc-float-nav-scaffold.vue'

export default {
    components: {
        RyanArcFloatNavScaffold
    },
    data() {
        return {
            currentIndex: 2,
            items: [
                { label: 'Home', icon: '/static/icons/home-outline.svg', activeIcon: '/static/icons/home-active.svg' },
                { label: 'Car Life', icon: '/static/icons/car-outline.svg', activeIcon: '/static/icons/car-active.svg' },
                {
                    label: 'AI Travel',
                    isCenter: true,
                    centerVariant: 'iconOnly',
                    centerImage: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=400&q=80'
                },
                { label: 'Explore', icon: '/static/icons/explore-outline.svg', activeIcon: '/static/icons/explore-active.svg' },
                { label: 'Profile', icon: '/static/icons/profile-outline.svg', activeIcon: '/static/icons/profile-active.svg' }
            ],
            pages: [
                { title: 'Home' },
                { title: 'Car Life' },
                { title: 'AI Travel' },
                { title: 'Explore' },
                { title: 'Profile' }
            ],
            layout: {
                maxWidth: 0,
                barHeight: 254,
                compactBarHeight: 238,
                barTop: 58,
                compactBarTop: 54,
                shellHeight: 196,
                compactShellHeight: 184,
                centerGap: 208,
                compactCenterGap: 186,
                centerTop: 80,
                compactCenterTop: 76,
                itemTopPadding: 78,
                itemSpacing: 12,
                itemIconSize: 46,
                activeItemIconSize: 46,
                centerSelectedSize: 112,
                centerUnselectedSize: 112,
                centerLabelSpacing: 12,
                topY: 31,
                shoulderWidth: 22,
                crestWidth: 96,
                crestHeight: 24,
                slopeLift: 1
            },
                theme: {
                backgroundColor: '#FFFFFF',
                selectedItemColor: '#1E88FF',
                unselectedItemColor: '#314A81'
            }
        }
    },
    methods: {
        handleChange({ index }) {
            this.currentIndex = index
        }
    }
}
</script>

RyanArcFloatNav Props

RyanArcFloatNavScaffold Props

items 字段

layout 常用参数

中间按钮样式

纯圆形图片不绘制额外圆底和阴影：

{
    label: 'AI Travel',
    isCenter: true,
    centerVariant: 'iconOnly',
    centerImage: '/static/ai-travel-avatar.png'
}

圆形背景加中心图标：

{
    label: 'AI Travel',
    isCenter: true,
    centerVariant: 'circleBackground',
    centerIcon: '/static/icons/ai-travel-outline.svg',
    activeCenterIcon: '/static/icons/ai-travel-active.svg',
    centerIconSize: 48,
    centerButtonColor: '#EDF6FF',
    centerButtonPadding: 18
}

圆形背景和边框统一使用 theme.centerButtonColor；阴影使用 theme.centerShadowColor、layout.centerShadowBlur 和 layout.centerShadowOffsetY。

事件

说明

• 微信小程序下，底栏背景当前仍使用 SVG background-image 方案
• 如果后续继续针对小程序渲染细节优化，优先调整的是背景层结构，而不是 tab 交互逻辑