uni-app:配置底部tabbar的例子(hbuilderx 3.6.18)

一，官网文档地址：

https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

如图:

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/04/uniapp-pei-zhi-di-bu-tabbar-de-li-zi-hbuilderx-3-6-18/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，代码：

编辑pages.json

说明：pagePath路径必须真实存在，如果搞错tabbar会不显示

    "tabBar": {
        "color": "#7A7E83", //字体颜色
        "selectedColor": "#007AFF", //选中时字体颜色
        "borderStyle": "black", //底部的上边框线条
        "backgroundColor": "#F8F8F8", //底部背景色
        "fontSize": "12px", //字体大小
        "spacing": "5px", //字体到图标的距离
        "height": "60px", //底部高
        "list": [
          {
            "pagePath": "pages/list3/list3",
            "text": "首页",
            "iconPath": "static/tabbar/home.png",//未选中时图片样式
            "selectedIconPath": "static/tabbar/homeSel.png"//选中时图片样式
          },
          {
            "pagePath": "pages/swiper/swiper",
            "text": "年级",
            "iconPath": "static/tabbar/grade.png",
            "selectedIconPath": "static/tabbar/gradeSel.png"
          },
          {
            "pagePath": "pages/toast/toast",
            "text": "我的",
            "iconPath": "static/tabbar/my.png",
            "selectedIconPath": "static/tabbar/mySel.png"
          }
        ]
      }
}

三，查看效果

四，查看hbuilderx的版本: 

 

posted @ 2023-02-14 16:01  刘宏缔的架构森林  阅读(497)  评论(0)  编辑  收藏  举报