uniapp使用多个tabbar 效果跟原生一样

原创

已于 2022-06-13 09:32:27 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端框架

于 2022-05-27 10:29:51 首次发布

本文介绍了在uniapp中如何处理H5和APP不同需求的tabbar展示问题。当H5只需要三个tabbar，而APP需要八个动态显示的tabbar时，通过在page.json配置并结合动态隐藏tabbar的方法，解决了性能和兼容性的问题。商户端首页可以隐藏tabbar，商城首页则展示商城的tabbar，实现了从商户端到商城的平滑跳转。

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

原文链接
fm:业务需求 uniapp 一个项目编译H5商城跟商户端app 但是H5不需要商户端的tabbar 但是打包成商户端app时候需要可以跳转到商城也就是需要需要商城的tabbar 我试过商户端app使用自定义tabbar 但是这样渲染页面太慢了 uniapp最多只能有五个tabbar 那现在怎么展示八个呢还要动态显示还要不影响性能

在page.json 文件里通过H5编译那就只有是三个tabbar能生效在app里面有八个tabbar生效那问题有来了那H5可以了那app展示八个怎么行那商户端首页也展示商城的tabbar了上面只是说让tabbar生效那再把tabbar隐藏就好了

    "preloadRule": {
   
   
        "pages/tabBar/home": {
   
   
            "network": "all",
            "packages": [
                "pagesA",
                "pagesB"

            ]
        }
    }
    //上面这个preloadRule没用 主要是为了方便看 这个逗号要放在h5编译里面 
    // #ifdef H5  
    ,
    "tabBar": {
   
   
        "color": "#000000",
        "selectedColor": "#FB8D37",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [

            {
   
   
                "pagePath": "pages/tabBar/home",
                "iconPath": "static/img/homeWx.png",
                "selectedIconPath": "static/img/homeWxh.png",
                "text": "首页"

            },
            // {
   
   
            //     "pagePath": "pages/tabBar/allGoods",
            //     "iconPath": "static/img/goShoppingWx.png",
            //     "selectedIconPath": "static/img/goShoppingWxh.png",
            //     "text": "分类"
            // },
            // //#ifdef MP-WEIXIN  
            // {
   
   
            //     "pagePath": "pages/tabBar/livePlayer",
            //     "iconPath": "static/img/live.png",
            //     "selectedIconPath": "static/img/livechecked.png",
            //     "text": "美呀直播"
            // },
            // // #endif  

            {
   
   
                "pagePath": "pages/tabBar/shoppingCart",
                "iconPath": "static/img/shoppingWx.png"<