微信小程序實戰–集閱讀與電影於一體的小程序項目（四）

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;
  width: 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 {
  width: 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 {
  width: 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";

預覽效果