19.添加电影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.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> <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; 17rpx;}.star-score { color: #1f3463;}movie-template.wxml
<import src="../stars/stars-template.wxml" /><template name="movieTemplate"> <view class="movie-container"> <image class="movie-img" src='/images/xihongshi.png'></image> <text class="movie-title">西虹市首富</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 { 200rpx; height: 270rpx; padding-bottom: 20rpx;}.movie-title { margin-bottom: 16rpx; font-size: 24rpx;}movie-list-template.wxml
<import src="../movie/movie-template.wxml" /><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 { 9rpx; height: 16rpx; vertical-align: middle;}.movies-container{ display:flex; flex-direction: row;}movies.wxml
<import src="movie-list/movie-list-template.wxml" /><view> <template is="movielistTemplate" /> <template is="movielistTemplate" /> <template is="movielistTemplate" /></view>movies.wxss
@import "movie-list/movie-list-template.wxss";预览效果
