提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  移动开发

当前栏目

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

App配置 例子 18 uni 底部 3.6 tabBar
2023-09-14 08:59:32 时间

一，官网文档地址：

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

如图:

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： 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的版本: 

 

相关文章