慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-movie-list template的样式实现

movie-list template的样式实现

1.进入目录 pages/movies/movie-list，修改文件 movie-list-template.wxml

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

2.进入目录 pages/movies/movie-list，修改文件 movie-list-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;
}

3.进入目录 pages/movies/movie-list，修改文件 movie-list-template.wxss，more class 不使用浮动方式

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

.movie-list-container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.inner-container {
  margin: 0 auto 20rpx;
}

.movie-head {
  padding: 30rpx 20rpx 22rpx;
  display: flex;
  flex-direction: row;
}

.slogan {
  font-size: 24rpx;
}

.more {
  /* float: right; */
}

.more-text {
  /* 设置成flex 下面属性没有效果了 */
  /* vertical-align: middle; */
  margin-right: 10rpx;
  color: #1f4ba5;
}

.more-img {
  width: 9rpx;
  height: 16rpx;
  /* 设置成flex 下面属性没有效果了 */
  /* vertical-align: middle; */
}

.movies-container {
  display: flex;
  flex-direction: row;
}

4.进入目录 pages/movies/movie-list，修改文件 movie-list-template.wxss，微调位置就可以了，最后还原使用浮动