（九）微信小程序：电影页面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设计，明确了复用元素的意义，但这仅仅是一个静态页面！

下节会呈现动态页面，数据从网络中获取，达到动态页面效果~