更新记录

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, 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: 82,
                itemTopPadding: 78,
                itemSpacing: 12,
                itemIconSize: 46,
                activeItemIconSize: 46,
                centerSelectedSize: 92,
                centerUnselectedSize: 92,
                centerLabelSpacing: -5,
                topY: 31,
                shoulderWidth: 15,
                crestWidth: 82,
                crestHeight: 24,
                slopeLift: 1
            },
            theme: {
                backgroundColor: '#FFFFFF',
                selectedItemColor: '#1E88FF',
                unselectedItemColor: '#314A81'
            }
        }
    },
    methods: {
        handleChange({ index }) {
            this.currentIndex = index
        }
    }
}
</script>

RyanArcFloatNav Props

RyanArcFloatNavScaffold Props

items 字段

layout 常用参数

事件

说明

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