微信小程序实战–集阅读与电影于一体的小程序项目(八)
时间:2018-08-19
本文章向大家介绍微信小程序实战–集阅读与电影于一体的小程序项目,需要的朋友可以参考一下
31.电影详情页面
movie-template.wxml
<view class="movie-container" catchtap="onMovieTap" data-movieId="{{movieId}}">
movie.js
onMovieTap:function(event) {
var movieId = event.currentTarget.dataset.movieid;
wx.navigateTo({
url: "movie-detail/movie-detail?id=" + movieId
})
},
util.js
function convertToCastString(casts) {
var castsjoin = "";
for (var idx in casts) {
castsjoin = castsjoin + casts[idx].name + " / ";
}
return castsjoin.substring(0, castsjoin.length - 2);
}
function convertToCastInfos(casts) {
var castsArray = []
for (var idx in casts) {
var cast = {
img: casts[idx].avatars ? casts[idx].avatars.large : "",
name: casts[idx].name
}
castsArray.push(cast);
}
return castsArray;
}
module.exports = {
convertToStarArray: convertToStarArray,
http: http,
convertToCastString: convertToCastString,
convertToCastInfos: convertToCastInfos
};
movie-detail.js
var util = require('../../../utils/util.js');
var app=getApp()
Page({
data:{
movie:{}
},
onLoad:function(options){
var movieId = options.id;
var url = app.globalData.g_baseUrl +
"/v2/movie/subject/" + movieId;
util.http(url,this.processDoubanData);
},
processDoubanData:function(data){
var director = {
avatar: "",
name: "",
id: ""
}
if (data.directors[0] != null) {
if (data.directors[0].avatars != null) {
director.avatar = data.directors[0].avatars.large
}
director.name = data.directors[0].name;
director.id = data.directors[0].id;
}
var movie = {
movieImg: data.images ? data.images.large : "",
country: data.countries[0],
title: data.title,
originalTitle: data.original_title,
wishCount: data.wish_count,
commentCount: data.comments_count,
year: data.year,
generes: data.genres.join("、"),
stars: util.convertToStarArray(data.rating.stars),
score: data.rating.average,
director: director,
casts: util.convertToCastString(data.casts),
castsInfo: util.convertToCastInfos(data.casts),
summary: data.summary
}
console.log(movie)
this.setData({
movie:movie
})
}
})
movie-detail.wxml
<import src="../stars/stars-template.wxml" />
<view class="container">
<image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" />
<view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg">
<text class="main-title">{{movie.title}}</text>
<text class="sub-title">{{movie.country + " · "+movie.year}}</text>
<view class="like">
<text class="highlight-font">
{{movie.wishCount}}
</text>
<text class="plain-font">
人喜欢
</text>
<text class="highlight-font">
{{movie.commentCount}}
</text>
<text class="plain-font">
条评论
</text>
</view>
</view>
<image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"/>
<view class="summary">
<view class="original-title">
<text>{{movie.originalTitle}}</text>
</view>
<view class="flex-row">
<text class="mark">评分</text>
<template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" />
</view>
<view class="flex-row">
<text class="mark">导演</text>
<text>{{movie.director.name}}</text>
</view>
<view class="flex-row">
<text class="mark">影人</text>
<text>{{movie.casts}}</text>
</view>
<view class="flex-row">
<text class="mark">类型</text>
<text>{{movie.generes}}</text>
</view>
</view>
<view class="hr"></view>
<view class="synopsis">
<text class="synopsis-font">剧情简介</text>
<text class="summary-content">{{movie.summary}}</text>
</view>
<view class="hr"></view>
<view class="cast">
<text class="cast-font"> 影人</text>
<scroll-view class="cast-imgs" scroll-x="true" style="width:100%">
<block wx:for="{{movie.castsInfo}}" wx:for-item="item">
<view class="cast-container">
<image class="cast-img" src="{{item.img}}"></image>
<text class="cast-name">{{item.name}}</text>
</view>
</block>
</scroll-view>
</view>
</view>
movie-detail.wxss
@import "../stars/stars-template.wxss";
.container{
display:flex;
flex-direction: column;
}
.head-img{
width:100%;
height: 320rpx;
}
.head-img-hover{
width: 100%;
height: 320rpx;
position:absolute;
top:0;
left:0;
display:flex;
flex-direction: column;
}
.main-title{
font-size: 19px;
color:#fff;
font-weight:bold;
margin-top: 50rpx;
margin-left: 40rpx;
letter-spacing: 2px;
}
.sub-title{
font-size: 28rpx;
color:#fff;
margin-left: 40rpx;
margin-top: 30rpx;
}
.like{
display:flex;
flex-direction: row;
margin-top: 30rpx;
margin-left: 40rpx;
}
.highlight-font{
color: #f21146;
font-size:22rpx;
margin-right: 10rpx;
}
.plain-font{
color: #666;
font-size:22rpx;
margin-right: 30rpx;
}
.movie-img{
height:238rpx;
width: 175rpx;
position: absolute;
top:160rpx;
right: 30rpx;
}
.summary{
margin-left:40rpx;
margin-top: 40rpx;
color: #777777;
}
.original-title{
color: #1f3463;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 40rpx;
}
.flex-row{
display:flex;
flex-direction: row;
margin-bottom: 10rpx;
}
.mark{
margin-right: 30rpx;
white-space:nowrap;
color: #999999;
}
.hr{
margin-top:45rpx;
height:1px;
width: 100%;
background-color: #d9d9d9;
}
.synopsis{
margin-left:40rpx;
display:flex;
flex-direction: column;
margin-top: 50rpx;
}
.synopsis-font{
color:#999;
}
.summary-content{
margin-top: 20rpx;
margin-right: 40rpx;
line-height:40rpx;
letter-spacing: 1px;
}
.cast{
margin-left:40rpx;
display:flex;
flex-direction: column;
margin-top:50rpx;
}
.cast-font{
color: #999;
margin-bottom: 40rpx;
}
.cast-container{
display:inline-flex;
flex-direction: column;
margin-bottom: 50rpx;
margin-right: 40rpx;
width: 170rpx;
text-align:center;
white-space: normal;
}
.cast-imgs{
white-space: nowrap;
}
.cast-img{
width: 170rpx;
height: 210rpx;
}
.cast-name{
margin: 10rpx auto 0;
}
结果
- WCF技术剖析之二十三:服务实例(Service Instance)生命周期如何控制[下篇]
- WCF技术剖析之二十一: WCF基本的异常处理模式[上篇]
- 树大招风:细数2017年加密货币市场的幺蛾子事件
- 如何解决HP QC(Quality Center)在Windows 7下不能工作的问题
- WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[上篇]
- 5个典型实例启发:什么是数据可视化
- 智能家居“智商”不够,能靠情商来补吗
- 大话MVP
- AngularJS in Action读书笔记1——扫平一揽子专业术语
- MS Enterprise Library 5.0发布!!
- WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]
- 《Enterprise Library深入解析与灵活应用》博文系列汇总
- 使命必达: 深入剖析WCF的可靠会话[概念篇]
- AngularJS in Action读书笔记2——view和controller的那些事儿
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- vue项目使用 富文本 封装
- typescript基础篇(5):类
- .Net微服务实战之Kubernetes的搭建与使用
- 使用Prometheus监控Golang服务-基于YoyoGo框架
- 使用jedis面临的非线程安全问题
- 基于UVM的UART验证环境
- 潘石屹用Python解决100个问题 | 打印菱形
- Android:源码解析 Dialog的窗口机制
- Java|获取图片rgb值
- (数据科学学习手札93)利用geopandas与PostGIS进行交互
- 设计模式(三):旅行的角度理解抽象工厂模式
- 机器学习中的优化算法!
- 【进阶篇】Python+Go——带大家一起另寻途径提高计算性能
- 爬取豆瓣高分电影。
- 快速带你上手Hyperledger Fabric环境搭建+开发测试