接着上文继续~（上文地址：https://www.jianshu.com/p/4734a162ccff）
项目效果
detail.gif
- detail.wxml文件：
<view class="page">
<view class="list">
<view class="left" style="width:40%;height:420rpx">
<image src="{{detailList.images.large}}" style="height:420rpx" />
</view>
<view class="right" style="width:60%;height:420rpx">
<view class="row">
<text style="font-size:20px;">{{detailList.original_title}} </text>{{detailList.year}}
</view>
<view class="row">
评分：{{detailList.rating.average}}
</view>
<view class="row">
导演：<view wx:for="{{detailList.directors}}" wx:for-item="directors" wx:key="{{index}}">
{{directors.name}}
</view>
</view>
<view class="row">
主演：<view wx:for="{{detailList.casts}}" wx:for-item="casts" wx:key="{{index}}">
{{casts.name}}
</view>
</view>
</view>
</view>
<view class="story">
<text class="story-title">剧情简介</text>
<view class="story-detail">{{detailList.summary}}</view>
</view>
<view class="cast">
<text class="cast-title">影人</text>
<scroll-view scroll-left="0" scroll-x class="scroll">
<block wx:for="{{detailList.casts}}" wx:key="{{index}}">
<view class="cast-detail">
<image src="{{item.avatars.large}}" />
<text class="cast-name" >{{item.name}}</text>
</view>
</block>
</scroll-view>
</view>
</view>
- detail.wxss文件：
@import "../../styles/movieLayout"; /* 引入公共样式文件 ，具体样式代码请查看之前的文章 */
.story,.cast{
margin:16rpx
}
.story-title,.cast-title{
font-size:12px;
color:#726F6F;
}
.story-detail{
text-indent:2em;
margin-top:10rpx;
}
.scroll{
display: flex;
white-space: nowrap;
width:100%;
}
.cast-detail{
display: inline-block;
}
.cast-detail image{
margin-top:10rpx;
display: block; /* 将名字放在图片下面 */
height:300rpx;
width:130px;
padding-right: 10rpx;
}
.cast-detail text{
display: block;
}
- detail.js文件：
var api = require('../../utils/api');
Page({
data: {
detailList:{}
},
onLoad: function (options) {
var id = options.id;//获取传递过来的参数
api.getDetail(id)
.then(res=>{
//console.log(res)
this.setData({
detailList:res
})
})
}
})
到这里为止，仿豆瓣电影demo基本完成啦~
如果文中有什么不对的或者需要注意的地方欢迎大家指正，一起分享交流~
本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。
