tabBar学习笔记

1，H5端，tabBar可根据需要，自己写。

在小程序和App端，为提升性能，在 pages.json 里配置固定的原生tabBar。但在H5端，这一设计并不会提升性能。tabbar 在H5端是div模拟的。

但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。

• H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 (opens new window)来自定义
• 普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。所以这种情况建议使用单页方式。单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。如果是App端，nvue单页的性能会显著高于vue页面

2，App和小程序端非必要不要自定义tabBar，原生tabBar性能快，因此，小程序和App端推荐用原生tabBar。

• 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡（较为复杂没看懂，还是自己写）。

总之，H5端根据需要自己写，小程序、App用原生tabBar。

3，可在pages.json中条件编译，除了 H5 平台，其它平台均存在的代码

// #ifndef H5
    ,
    "tabBar": {
        "color": "#a0a5ab",
        "selectedColor": "#000000",
        "fontSize": "30px",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            // "iconPath": "static/image/icon_component.png",
            // "selectedIconPath": "static/image/icon_component_HL.png",
            "text": "资讯"
        }, {
            "pagePath": "pages/fabu/fabu",
            // "iconPath": "static/image/icon_API.png",
            // "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "发布"
        }, {
            "pagePath": "pages/xunzao/xunzao",
            // "iconPath": "static/image/icon_API.png",
            // "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "寻找"
        }, {
            "pagePath": "pages/xiaoxi/xiaoxi",
            // "iconPath": "static/image/icon_API.png",
            // "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "消息"
        }, {
            "pagePath": "pages/wode/wode",
            // "iconPath": "static/image/icon_API.png",
            // "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "我的"
        }]
    }
    // #endif

4，在pages.json中，条件编译，只在 H5 平台存在的代码

"pages": [
        // #ifdef H5
        {
            "path" : "pages/indexH5/indexH5",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        },
        // #endif

pages/indexH5/indexH5做为H5端的单页方式，运用swiper + scroller-view切换页面（可看tabbar标签页笔记）。

• 普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。所以这种情况建议使用单页方式。单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。如果是App端，nvue单页的性能会显著高于vue页面

5，利用easycom组件规则，创建若干个组件，把组件用到indexH5的swiper-item中，以及用到小程序、App端的相应页面中。这一套组件，就能实现多端复用。

6，运用match-media动态显示自定义的tabbar

<match-media :min-width="768">
            <!-- 顶部tabbar -->

<match-media :max-width="768">
            <!-- 底部tabbar -->