猫眼电影底部导航

转自csdn

学习小程序是一个拓展吧。
猫眼电影底部导航在好久之前已经学过代码，我学的是刘刚写的“微信小程序开发”，可是因为临近考试，并且代码出现错误，便没继续学了。
写这个代码，我遇到了不少问题，一一列出来：
代码位于app.json

1. 大小写问题，tabBar pagePath list selectedIconPath borderStyle selectedColor 这些都是区分大小写的，若错误，则这个命令无效。

2. 颜色控制问题，borderStyle 这个选项只能填 white 或者 black ，不然错误

3. 单词不了解，background 背景，navigation 导航，tab bar 标签栏，pagepath 页面路径， icon 图标。

4. 图片，图片会保存在images，图片名称和代码名称要注意保持一致，否则会出错。
5. 总，代码包括page配置页面路径，window配置窗口表现，tabbar配置标签导航。

整体仍是很简单的。

如下是代码：

{
  "pages": [
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/find/find",
    "pages/me/me"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#D53E37",
    "navigationBarTitleText": "电影",
    "navigationBarTextStyle": "white"
  },
"tabBar":{
  "selectedColor":"#d53e37",
  "backgroundColor":"#f5f5f5",
  "borderStyle":"black",
  "list":[{
    "pagePath":"pages/movie/movie",
    "text":"电影",
    "iconPath":"images/bar/movie-0.jpg",
    "selectedIconPath":"images/bar/movie-1.jpg"
  },
  {
    "pagePath": "pages/cinema/cinema",
    "text": "影院",
    "iconPath": "images/bar/cinema-0.jpg",
    "selectedIconPath": "images/bar/cinema-1.jpg"
  },
  {
        "pagePath": "pages/find/find",
        "text": "发现",
        "iconPath": "images/bar/find-0.jpg",
        "selectedIconPath": "images/bar/find-1.jpg"
  },
  {
        "pagePath": "pages/me/me",
        "text": "个人",
        "iconPath": "images/bar/me-0.jpg",
        "selectedIconPath": "images/bar/me-1.jpg"

}
    ]
  },
  "           ": "sitemap.json"
}