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

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

<template name="starsTemplate">  <view class="stars-container">    <view class="stars">      <image src="/images/icon/star.png"></image>      <image src="/images/icon/star.png"></image>      <image src="/images/icon/star.png"></image>      <image src="/images/icon/star.png"></image>      <image src="/images/icon/star.png"></image>    </view>    <text class="star-score ">9</text>  </view></template>

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;   17rpx;}.star-score {  color: #1f3463;}

movie-template.wxml

<import src="../stars/stars-template.wxml" /><template name="movieTemplate">    <view class="movie-container">      <image class="movie-img" src='/images/xihongshi.png'></image>      <text class="movie-title">西虹市首富</text>      <template is="starsTemplate" />    </view>  </template>

movie-template.wxss

@import "../stars/stars-template.wxss";@import "../stars/stars-template.wxss";.movie-container {  display: flex;  flex-direction: column;  padding: 0 22rpx;}.movie-img {   200rpx;  height: 270rpx;  padding-bottom: 20rpx;}.movie-title {  margin-bottom: 16rpx;  font-size: 24rpx;}

movie-list-template.wxml

<import src="../movie/movie-template.wxml" /><template name="movielistTemplate">  <view class="movie-lsit-container">    <view class="inner-container">      <view class="movie-head">        <text class="slogan">正在热映</text>        <view class="more">          <text class="more-text">更多</text>          <image class="more-img" src="/images/icon/arrow-right.png"></image>        </view>      </view>      <view class="movies-container">        <template is="movieTemplate" />        <template is="movieTemplate" />        <template is="movieTemplate" />      </view>    </view>  </view></template>

movie-list-template.wxss

@import "../movie/movie-template.wxss";@import "../movie/movie-template.wxss";.movie-list-container {  background-color: #fff;  display: flex;  flex-direction: column;}.inner-container{    margin: 0  auto 20rpx;}.movie-head {  padding: 30rpx 20rpx 22rpx;}.slogan {  font-size: 24rpx;}.more {  float: right;}.more-text {  vertical-align: middle;  margin-right: 10rpx;  color: #1f4ba5;}.more-img {   9rpx;  height: 16rpx;  vertical-align: middle;}.movies-container{    display:flex;    flex-direction: row;}

movies.wxml

<import src="movie-list/movie-list-template.wxml" /><view>    <template is="movielistTemplate" />    <template is="movielistTemplate" />    <template is="movielistTemplate" /></view>

movies.wxss

@import "movie-list/movie-list-template.wxss";

预览效果