（九）微信小程序：電影頁面UI設計

電影頁面UI設計

　　1.理清邏輯+辨清可復用元素=template

　　　　　　<!--

  　　　　　　　　頁面可復用元素

    　　　　　　　　1.列表電影

      　　　　　　　　　　movie-list-template

    　　　　　　　　2.電影信息

      　　　　　　　　　　movie-template

    　　　　　　　　3.評分信息

      　　　　　　　　　　stars-template

    　　　　　　　層級關系:movie > movie-list-template > movie-template  > stars-template

　　　　　　-->

　　　　　結構圖：

 

 

 　　2.具體進行代碼書寫：

　　　　　　　　從stars-template寫起，上層引用下層模板

　　　　　　(1)stars-template　　　　　　　　　　

<template name="starTemplate">
  <view class="stars-container">
    <view class="stars">
        <image src="../../image/star.png"></image>
        <image src="../../image/star.png"></image>
        <image src="../../image/star.png"></image>
        <image src="../../image/star.png"></image>
        <image src="../../image/star.png"></image>
        <view class="star-score">8.0</view>
    </view>
  </view>
</template>

stars-template.wxml

.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 {
  font-size: 12px;
  color: #1f3463;
  vertical-align: middle;
}

　　　　　　(2)movie-template

<import src="../stars-template/stars-template.wxml"/>
<template name="movieTemplate">
  <view class="movie-container">
    <image class="movie-img" src="../../image/sub1.jpg"></image>
    <text class="movie-title">肖申克的救贖</text>
    <template is="starTemplate" />
  </view>
  <view class="movie-container">
    <image class="movie-img" src="../../image/sub1.jpg"></image>
    <text class="movie-title">肖申克的救贖</text>
    <template is="starTemplate" />
  </view>
  <view class="movie-container">
    <image class="movie-img" src="../../image/sub1.jpg"></image>
    <text class="movie-title">肖申克的救贖</text>
    <template is="starTemplate" />
  </view>
</template>

@import "../stars-template/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;
}

　　　　　　(3)movie-list-template

<import src="../movie-template/movie-template.wxml"/>
<template name="movieListTemplate">
  <view class="movie-list-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="../../image/arrow-right.png"></image>
        </view>
      </view>
      <view class="movies-container">
          <template is="movieTemplate"/>
      </view>
    </view>
  </view>
</template>

movie-list-template.wxml

@import "../movie-template/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;
}

movie-list-template.wxss

　　　　　　最終movie.wxml

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

　　　　3.實現效果：

　　　　　　　　　　

 

  本節實現了電影界面的UI設計，明確了復用元素的意義，但這僅僅是一個靜態頁面！

下節會呈現動態頁面，數據從網絡中獲取，達到動態頁面效果~