微信小程序仿豆瓣电影页面demo（4）--电影详情页

接着上文继续~（上文地址：https://www.jianshu.com/p/4734a162ccff）

项目效果

detail.gif

1. 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>

2. 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; 
}

3. 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基本完成啦~
如果文中有什么不对的或者需要注意的地方欢迎大家指正，一起分享交流~

本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。