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

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

项目效果

detail.gif

1. detail.wxml文件：

    
          
            
          
          
            
              {{detailList.original_title}} {{detailList.year}}
            
            
              评分：{{detailList.rating.average}}
            
            
              导演：
                {{directors.name}}
              
            
            
              主演：
                {{casts.name}}
              
              
          
    
    
      剧情简介
      {{detailList.summary}}
    
    
      影人
      
        
          
              
              {{item.name}}          
          
        
          
     

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

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