template:
wxml:stars-movie-movie-list
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> </view> <text class="star-score">8.9</text> </view> </template>
movie-template.wxml
<import src="../stars/stars-template.wxml" /> <template name="movieTemplate"> <view class="movie-container"> <image class="movie-img" src="/images/yourname.jpg"></image> <text class="movie-title">gaggagag</text> <template is="starsTemplate"/> </view> </template>
movie-list-template.wxml
<import src="../movie/movie-template.wxml" /> <template name="movieListTemplate"> <view class="movie-list-container"> <view class="inner-container"> <view class="movie-head"> <text class="slogan">正在热映</text> <view catchtap="onMoreTap" 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>
wxss:
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.wxss
@import "../
stars/
stars-template.
wxss";
.movie-container {
display:
flex;
flex-direction:
column;
padding:
0
22
rpx;
}
.movie-img {
width:
200
rpx;
height:
270
rpx;
padding-bottom:
20
rpx;
}
.movie-title{
margin-bottom:
16
rpx;
font-size:
24
rpx;
}
movie-list-template.wxss
扫描二维码关注公众号,回复:
1333238 查看本文章
@import "../
movie/
movie-template.
wxss";
.movie-list-container {
background-color:
#fff;
display:
flex;
flex-direction:
column;
}
.inner-container{
margin:
0
auto
20
rpx;
}
.movie-head {
padding:
30
rpx
20
rpx
22
rpx;
/*display:flex;
flex-direction: row;
justify-content:space-between;*/
}
.slogan {
font-size:
24
rpx;
}
.more {
float:
right;
}
.more-text {
vertical-align:
middle;
margin-right:
10
rpx;
color:
#1f4ba5;
}
.more-img {
width:
9
rpx;
height:
16
rpx;
vertical-align:
middle;
}
.movies-container{
display:
flex;
flex-direction:
row;
}
页面使用:
movies.wxml
<import src="movie-list/movie-list-template.wxml" /> <view class="container"> <view class="movies-template"> <template is="movieListTemplate" data="{{...inTheaters}}" /> </view> <view class="movies-template"> <template is="movieListTemplate" data="{{...comingSoon}}" /> </view> <view class="movies-template"> <template is="movieListTemplate" data="{{...top250}}"/> </view> </view>
movies.wxss
@import "movie-list/movie-list-template.wxss";