实现电影详情页1.

主要实现的功能是：点击热映及top列表中的电影可以跳转到电影详情页面

一、主要需求：基本的布局改变（多使用flex布局），图文混排事件处理；网络请求水平滚动scroll-view的实现二、关键实现思路：使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。详情页上部分显示电影宣传海报，影片名及影片的基本信息，中间显示电影请节简介，下部分显示主演照片及姓名。对于过长的篇幅的处理是是页面可以进行上下滑动。三、实际代码：2.

对热映及top电影列表页的改变：修改index和movetop文件夹下的index.wxml文件。index下的index.wxml：（更改布局及类型）

!--index.wxml--viewclass"box"!--轮播图--swiperindicator-dots"{{indicatorDots}}"autoplay"{{autoplay}}"interval"{{interval}}"duration"{{duration}}"blockwx:for"{{imgUrls}}"wx:key"{{item}}"swiper-itemimagesrc"{{item}}"//swiper-item/block/swiper!--热映列表展示--viewclass"item"bindtap"showInfo"data-id"{{item.id}}"hover-class"tapClass"wx:for"{{moves}}"wx:key"{{item}}"imageclass"img"mode"aspectFit"src"{{item.images.large}}"/imageviewclass"movie-info"viewclass"movie-row"spanclass"content"{{item.title}}/span/viewviewclass"movie-row"textclass"label"主演:/textspanclass"label"wx:key"{{item.id}}"wx:for"{{item.casts}}"wx:for-item"cast"textclass"cast-name"{{cast.name}}/text/span/viewviewclass"movie-row"textclass"label"导演:/textspanclass"label"wx:key"{{item.id}}"wx:for"{{item.directors}}"wx:for-item"director"textclass"cast-name"{{director.name}}/text/span/viewviewclass"movie-row"textclass"label"类型:/textspanclass"label"wx:key"{{item.id}}"wx:for"{{item.genres}}"wx:for-item"item"textclass"cast-name"{{item}}/text/span/view/view/view/view3.

movetop文件夹下的index.wxml:

viewclass"box"viewclass"item"bindtap"showInfo"data-id"{{item.id}}"hover-class"tapClass"wx:for"{{moves}}"wx:key"{{item}}"imageclass"img"mode"aspectFit"src"{{item.images.large}}"/imageviewclass"movie-info"viewclass"movie-row"spanclass"content"{{item.title}}/span/viewviewclass"movie-row"spanclass"label"导演:/spanspanclass"label"wx:key"{{item.id}}"wx:for"{{item.directors}}"wx:for-item"director"textclass"cast-name"{{director.name}}/text/span/viewviewclass"movie-row"spanclass"label"主演:/spanspanclass"label"wx:key"{{item.id}}"wx:for"{{item.casts}}"wx:for-item"cast"textclass"cast-name"{{cast.name}}/text/span/view/view/view/view4.

添加index.wxss文件内容（添加新格式）：

/*pages/moveTop/index.wxss*//**index.wxss**/swiper-itemimage{width:100%;height:200px;padding:0px;}.box{display:flex;flex-direction:column;justify-content:flex-start}.item{display:inline-flex;margin-bottom:3rpx;background-color:white;justify-content:flex-start;padding-top:30rpx}.movie-info{flex:2;display:flex;flex-direction:column}.img{flex:1;height:210rpx;width:140rpx;}.cast{display:inline-flex;flex-direction:row}.tapClass{background-color:blanchedalmond}.movie-row{display:inline-flex;flex-direction:row;flex-wrap:wrap}.label{font-size:28rpx;color:slategrey}.content{font-size:36rpx}.cast-name{font-size:28rpx;margin-right:16rpx}5.

然后开发电影详情页：在pages目录下新建一个detail目录，在detail目录中新建页面wxml文件，注意这里scroll-view水平滚动图文信息的实现。

6.

使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。

!--pages/detail/detail.wxml--viewclass"detail-container"viewclass"img-container"imagemode"aspectFit"src"{{detail.images.large}}"//viewviewclass"info-container"viewclass"info-row"text{{detail.title}}/textbr//viewviewclass"info-row"{{detail.genres}}|{{detail.durations[0]}}/viewviewclass"info-row"{{detail.mainland_pubdate}}在中国大陆上映/view/view/viewviewclass"movie-intr"{{detail.summary}}/viewviewclass"person-container"viewclass"act-info"演员/viewscroll-viewscroll-xclass"scroll-header"viewclass"act-img"wx:for"{{detail.casts}}"wx:key"{{item.id}}"viewimagemode"aspectFill"src"{{item.avatars.large}}"/imagetextclass"actor-name"{{item.name}}/text/view/view/scroll-view/viewviewbuttonclass"btn-like"type"primary"bindtap"addToLikes"data-id"{{detail.id}}"/button/view7.

样式wxss文件：

/*pages/detail/detail.wxss*/.detail-container{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;background-color:darkslategrey}.img-container{flex:1;}.img-containerimage{width:320rpx;height:220rpx}.info-container{flex:2;display:flex;flex-direction:column;justify-content:space-between;margin:20rpx020rpx0}.info-row{font-size:24rpx;color:white}.movie-intr{background-color:ghostwhite;font-size:26rpx;padding:40rpx;line-height:40rpx}.scroll-header{display:flex;flex-direction:column;white-space:nowrap;}.scroll-headerview{border:none;display:inline-block;}.scroll-headerimage{width:200rpx;height:300rpx;margin:6rpx6rpx6rpx6rpx}.act-info{font-size:28rpx;margin-left:10rpx}.act-img{display:flex;flex-direction:column;justify-content:left;margin-left:5rpx}.actor-name{font-size:28rpx;display:flex;flex-direction:column;justify-content:center;margin-left:5rpx}.btn-like{margin:30rpx40rpx20rpx40rpx}8.

detail.js文件：接收其他页面传递过来的参数，加载影片信息并显示。

/***页面的初始数据*/Page({data:{},/***生命周期函数--监听页面加载*/onLoad:function(options){//接收其他页面传递过来的参数letmovieIdoptions.id,thatthis;wx.showLoading({title:'加载影片信息中...',})wx.request({url:"http://api.douban.com/v2/movie/subject/"+movieId,data:{apikey:'0b2bdeda43b5688921839c8ecb20399b'},//url:"https://douban.uieee.com/v2/movie/subject/"+movieId,header:{"Content-Type":"json"},success:function(res){that.setData({detail:res.data});wx.hideLoading()}})}})9.

此时，程序的运行效果如下：