底部导航

功能介绍

底部导航用于在不同的功能模块之间进行快速切换。本功能允许插件开发者为各自的插件定义独立的底部导航结构，实现灵活的多模块导航体系。

每个插件都可以定义底部导航，需要实现 BottomNavigation 事件钩子 事件钩子关键代码

'BottomNavigation' => ['addon\shop\app\listener\BottomNavigationListener']

商城开发的底部导航，代码参考 关键代码（注意：list中每个link字段的数据结构就是自定义链接的）

<?php

namespace addon\shop\app\listener;

use app\service\core\addon\CoreAddonService;
use app\service\core\site\CoreSiteService;

/**
 * 底部导航
 */
class BottomNavigationListener
{
    public function handle($params = [])
    {
        $key = 'shop';

        $site_addon = ( new CoreSiteService() )->getAddonKeysBySiteId(request()->siteId());
        if (!in_array($key, $site_addon)) return;

        if (!empty($params) && !empty($params[ 'key' ]) && $params[ 'key' ] != $key) return;

        $core_addon_service = new CoreAddonService();
        $addon_info = $core_addon_service->getAddonConfig($key);

        return [
            'key' => $key,
            'info' => $addon_info,
            'value' => [
                'backgroundColor' => '#ffffff',
                'textColor' => '#333333',
                'textHoverColor' => '#FF4500',
                'type' => '1',
                'list' => [
                    [
                        "text" => "首页",
                        "link" => [
                            "parent" => "SHOP_LINK",
                            "name" => "SHOP_INDEX",
                            "title" => get_lang('dict_diy.shop_link_index'),
                            "url" => "/addon/shop/pages/index"
                        ],
                        "iconPath" => "addon/shop/diy/tabbar/system-home.png",
                        "iconSelectPath" => "addon/shop/diy/tabbar/system-home-selected.png"
                    ],
                    [
                        "text" => "我的",
                        "link" => [
                            "parent" => "SHOP_LINK",
                            "name" => "SHOP_MEMBER_INDEX",
                            "title" => get_lang('dict_diy.member_index'),
                            "url" => "/addon/shop/pages/member/index"
                        ],
                        "iconPath" => "addon/shop/diy/tabbar/system-my.png",
                        "iconSelectPath" => "addon/shop/diy/tabbar/system-my-selected.png"
                    ]
                ]
            ]
        ];
    }
}

uni-app调用底部导航组件

框架封装了底部导航组件。如需了解自定义链接的核心原理，开发者可以自行阅读

文件位置：uni-app/src/components/tabbar/tabbar.vue 关键代码（若无特殊业务需求，通常不需要指定addon的值，默认会根据当前页面路由来加载底部导航配置）

<tabbar addon="shop" />