微信小程序 | 隐藏底部菜单栏 json中的tabBar

朴灿烈づ我的快乐病毒、 2022-01-28 00:09 4862阅读 0赞

个人记录


微信小程序 | 隐藏json中的tabBar


一、小程序的app.json中的底部菜单设置

底部菜单栏:
在这里插入图片描述
代码:

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/login/login"
  5. ],
  6. "window": {
  7. "backgroundTextStyle": "light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "微信小程序",
  10. "navigationBarTextStyle": "black"
  11. },
  12. "tabBar": {
  13. "color": "#AAAAAA",
  14. "selectedColor": "#26BAEE",
  15. "backgroundColor": "#fff",
  16. "borderStyle": "white",
  17. "list": [
  18. {
  19. "selectedIconPath": "image/index/ic_home-select.png",
  20. "iconPath": "image/index/ic_home@2x.png",
  21. "pagePath": "pages/index/index",
  22. "text": "首页"
  23. },
  24. {
  25. "selectedIconPath": "image/index/ic_market-select.png",
  26. "iconPath": "image/index/ic_market@2x.png",
  27. "pagePath": "pages/market/market",
  28. "text": "广告超市"
  29. },
  30. {
  31. "selectedIconPath": "image/index/ic_order-select.png",
  32. "iconPath": "image/index/ic_order@2x.png",
  33. "pagePath": "pages/order/order",
  34. "text": "订单"
  35. },
  36. {
  37. "selectedIconPath": "image/index/ic_user-select.png",
  38. "iconPath": "image/index/ic_user@2x.png",
  39. "pagePath": "pages/user/user",
  40. "text": "我的"
  41. }
  42. ]
  43. },
  44. "sitemapLocation": "sitemap.json",
  45. "permission": {
  46. "scope.userLocation": {
  47. "desc": "你的位置信息将用于小程序位置接口的效果展示"
  48. }
  49. },
  50. "networkTimeout": {
  51. "request": 5000
  52. }
  53. }

二、隐藏tabBar

代码:

  1. wx.hideTabBar()-- 隐藏底部按钮

使用微信小程序API中的 wx.hideTabBar() 方法,直接调用即可
在这里插入图片描述


三、效果图

在这里插入图片描述


发表评论

表情:
评论列表 (有 0 条评论,4862人围观)

还没有评论,来说两句吧...

相关阅读

    相关 程序底部导航

    *“花树得晴红欲染,远山过雨青如滴”** 序 最近自己在研究微信小程序,几乎每个程序都会有导航栏,或在顶部,或在底部。于是我简单做了一个导航栏在底部的程序。 ...

    相关 程序底部导航实现

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。 我们先来看个我们要实现的底