微信小程序实战–集阅读与电影于一体的小程序项目(四)
2023-09-11 14:19:33 时间
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;
width: 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 {
width: 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 {
width: 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";
预览效果
相关文章
- 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
- 【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
- Django 创建第一个项目
- vue项目js和css文件名避免浏览器缓存再vue.config.js中配置
- Flutter 精品项目大全之 完整UI组件商城项目(教程含源码)
- 如何在Spring Boot项目中集成微信支付V3
- 微信小程序云开发项目实战之商城开发日记 01
- 基于微信小程序云开发的商城项目~
- 微信小程序实战–集阅读与电影于一体的小程序项目(二)
- 自动加载,热加载java项目文件
- SpringMVC_入门项目
- 微信小程序项目实战(App)实战篇-Array老师-专题视频课程
- .net获取项目根目录方法集合
- 非洲地区太阳能计划:赞比亚的6美分光伏项目