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

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.w

<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.w

<import src=\"../stars/stars-template.w \" />
<template name=\"movieTemplate\">
    <view class=\"movie-container\">
      <image class=\"movie-img\" src=\'/images/xihongshi.png\'></image>
      <text class=\"movie- \">西虹市首富</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-  {
  margin-bottom: 16rpx;
  font-size: 24rpx;
}

movie-list-template.w

<import src=\"../movie/movie-template.w \" />
<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.w

<import src=\"movie-list/movie-list-template.w \" />

<view>
    <template is=\"movielistTemplate\" />
    <template is=\"movielistTemplate\" />
    <template is=\"movielistTemplate\" />
</view>

movies.wxss

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

预览效果