慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-完善tab选项卡

完善tab选项卡

1.修改项目下的文件 app.js，修改 tab 选项卡的属性，添加图片

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/posts",
    "pages/posts/post-detail/post-detail",
    "pages/movies/movies"
  ],
  "requiredBackgroundModes": [
    "audio",
    "location"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "borderStyle":"white",
    "list": [
      {
        "pagePath": "pages/posts/posts",
        "text": "阅读",
        "iconPath":"images/tab/yuedu.png",
        "selectedIconPath":"images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  },
  "sitemapLocation": "sitemap91.json"
}

2.测试

 

 

3.修改项目下的文件 app.js，设置 tab 选项卡的位置

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/posts",
    "pages/posts/post-detail/post-detail",
    "pages/movies/movies"
  ],
  "requiredBackgroundModes": [
    "audio",
    "location"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "borderStyle":"white",
    "position":"top",
    "list": [
      {
        "pagePath": "pages/posts/posts",
        "text": "阅读",
        "iconPath":"images/tab/yuedu.png",
        "selectedIconPath":"images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  },
  "sitemapLocation": "sitemap91.json"
}

4.测试