tabBar学习笔记

weixin_46398352

已于 2022-11-01 23:11:45 修改

阅读量308

点赞数

文章标签：学习前端 javascript

于 2022-11-01 20:49:14 首次发布

本文链接：https://blog.csdn.net/weixin_46398352/article/details/127641044

版权

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标签页笔记）。