微信小程序实战–集阅读与电影于一体的小程序项目(四)

19.添加电影tabBar

tabBar文档

在posts目录下新建movies目录,分别创建四个文件

app.json配置tabBar

{  "pages": [    "pages/posts/post",    "pages/welcome/welcome",        "pages/posts/post-detail/post-detail",    "pages/movies/movies"  ],  "window": {    "navigationBarBackgroundColor": "#405f80"  },  "tabBar": {    "borderStyle": "white",    "list": [      {        "pagePath": "pages/posts/post",        "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"      }    ]  }}

20.电影页面布局

目录结构

stars-template.wxml

stars-template.wxss

.stars-container {  display: flex;  flex-direction: row;}.stars {  display: flex;  flex-direction: row;  height: 17rpx;  margin-right: 24rpx;  margin-top: 6rpx;}.stars image {  padding-left: 3rpx;  height: 17rpx;  width: 17rpx;}.star-score {  color: #1f3463;}

movie-template.wxml