小程序学习（一）tabBar底部导航

最新推荐文章于 2024-08-07 22:38:02 发布

原创最新推荐文章于 2024-08-07 22:38:02 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一款微信小程序的界面配置详情，包括页面路径设置、窗口样式定义及底部标签栏设计等内容。通过具体配置项说明如何实现背景风格、导航栏样式、下拉刷新等功能，并展示了如何设置底部标签栏的图标和文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/wish/wish",
    "pages/surprise/surprise",
    "pages/list/list",
    "pages/happy/happy"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "backgroundColor": "#ffffff",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#666",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#eee",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/wish/wish",
      "text": "圣诞许愿",
      "iconPath": "images/wish.png",
      "selectedIconPath": "images/wish_active.png"  
    }, {
      "pagePath": "pages/surprise/surprise",
      "text": "惊喜盒子",
      "iconPath": "images/surprise.png",
      "selectedIconPath": "images/surprise_active.png"
    }]
  }
}