微信小程序——顶部导航标题栏、底部选项卡

最新推荐文章于 2024-09-01 22:07:00 发布

不要生病~

最新推荐文章于 2024-09-01 22:07:00 发布

阅读量1.6k

点赞数

分类专栏：小程序文章标签：小程序顶部导航底部选项

本文链接：https://blog.csdn.net/qq_41141657/article/details/88064386

版权

小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

顶部导航标题、底部选项卡均写在app.json中

顶部导航

navigationBarBackgroundColor——顶部背景颜色
navigationBarTitleText——文字内容
navigationBarTitleText——文字颜色

"window":{ 
    "backgroundTextStyle":"light",
     "color": "#fff",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "豆瓣电影",
    "navigationBarTextStyle":"white"
  },

底部选项卡

底部选项最少两个
color——文字默认颜色
selectedColor——文字选中时颜色
backgroundColor——底部背景颜色
pagePath——跳转到指定页面（路径为从最外面往里找）
text——文字内容
图片路径为从最外面往里找
iconPath——默认按钮图片
selectedIconPath——鼠标点击后图片

 "tabBar": {
    "color": "#fff",
   "selectedColor": "#09bb07",
   "backgroundColor": "#000",
    "list": [
      {"pagePath": "pages/index/index", 
        "text": "当前热映",
        "iconPath": "icon/before/01.png",
        "selectedIconPath": "icon/after/01.png" 
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "影院选择",
        "iconPath": "icon/before/02.png",
        "selectedIconPath": "icon/after/02.png"
      }
    ]

 }