實現電影詳情頁

主要實現的功能是：點擊熱映及top列表中的電影可以跳轉到電影詳情頁面

一、 主要需求：

基本的布局改變（多使用flex布局），圖文混排

事件處理；網絡請求

水平滾動scroll-view的實現

二、關鍵實現思路：

使用bindtap綁定點擊事件，給電影列表中的每一條信息循環綁定一個點擊事件，當點擊時，將從網絡獲取的電影id傳到處理函數中，再請求網絡獲取電影詳情信息，返回并顯示頁面。

詳情頁上部分顯示電影宣傳海報，影片名及影片的基本信息，中間顯示電影請節簡介，下部分顯示主演照片及姓名。對于過長的篇幅的處理是是頁面可以進行上下滑動。

三、實際代碼：

對熱映及top電影列表頁的改變：
修改index和movetop文件夾下的index.wxml文件。
index下的index.wxml：（更改布局及類型）

<!--index.wxml--> <view class="box"><!--輪播圖--><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}" wx:key="{{item}}"><swiper-item><image src="{{item}}" /></swiper-item></block></swiper><!--熱映列表展示--><view class="item" bindtap="showInfo" data-id="{{item.id}}" hover-class="tapClass"wx:for="{{moves}}" wx:key="{{item}}"><image class="img" mode="aspectFit" src="{{item.images.large}}"></image><view class="movie-info"><view class="movie-row"><span class="content">{{item.title}}</span></view><view class="movie-row"><text class="label">主演:</text><span class="label" wx:key="{{item.id}}" wx:for="{{item.casts}}"wx:for-item="cast"><text class="cast-name">{{cast.name}}</text></span></view><view class="movie-row"><text class="label">導演:</text><span class="label" wx:key="{{item.id}}" wx:for="{{item.directors}}" wx:for-item="director"><text class="cast-name">{{director.name}}</text></span></view><view class="movie-row"> <text class="label">類型:</text><span class="label" wx:key="{{item.id}}" wx:for="{{item.genres}}"wx:for-item="item"><text class="cast-name">{{item}}</text></span></view></view></view></view>

movetop文件夾下的index.wxml:

<view class="box"><view class="item" bindtap="showInfo" data-id="{{item.id}}" hover-class="tapClass"wx:for="{{moves}}" wx:key="{{item}}"><image class="img" mode="aspectFit" src="{{item.images.large}}"></image><view class="movie-info"><view class="movie-row"><span class="content">{{item.title}}</span></view><view class="movie-row"><span class="label">導演: </span><span class="label" wx:key="{{item.id}}" wx:for="{{item.directors}}" wx:for-item="director"><text class="cast-name">{{director.name}}</text></span></view><view class="movie-row"><span class="label">主演: </span><span class="label" wx:key="{{item.id}}" wx:for="{{item.casts}}" wx:for-item="cast"><text class="cast-name">{{cast.name}}</text></span></view></view></view> </view>

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

/* pages/moveTop/index.wxss */ /**index.wxss**/swiper-item > image {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 }

然后開發電影詳情頁：
在pages目錄下新建一個detail目錄，在detail目錄中新建頁面wxml文件，注意這里scroll-view水平滾動圖文信息的實現。

使用bindtap綁定點擊事件，給電影列表中的每一條信息循環綁定一個點擊事件，當點擊時，將從網絡獲取的電影id傳到處理函數中，再請求網絡獲取電影詳情信息，返回并顯示頁面。

<!--pages/detail/detail.wxml--> <view class="detail-container"><view class="img-container"><image mode="aspectFit" src="{{detail.images.large}}"/> </view><view class="info-container"><view class="info-row"><text>{{detail.title}}</text><br/></view><view class="info-row">{{detail.genres}} | {{detail.durations[0]}}</view><view class="info-row">{{detail.mainland_pubdate}} 在中國大陸上映</view></view> </view> <view class="movie-intr">{{detail.summary}} </view> <view class="person-container"><view class="act-info">演員</view><scroll-view scroll-x class="scroll-header" ><view class="act-img" wx:for="{{detail.casts}}" wx:key="{{item.id}}"><view><image mode="aspectFill" src="{{item.avatars.large}}"></image><text class="actor-name"> {{item.name}}</text></view></view> </scroll-view> </view> <view><button class="btn-like" type="primary" bindtap="addToLikes" data-id="{{detail.id}}"></button> </view>

樣式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-container image{width:320rpx;height: 220rpx } .info-container{flex: 2;display: flex;flex-direction: column;justify-content: space-between;margin: 20rpx 0 20rpx 0 } .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-header view{ border:none; display: inline-block; } .scroll-header image{width:200rpx;height: 300rpx;margin: 6rpx 6rpx 6rpx 6rpx } .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: 30rpx 40rpx 20rpx 40rpx }

detail.js文件：接收其他頁面傳遞過來的參數，加載影片信息并顯示。

/*** 頁面的初始數據*/ Page({data: {},/*** 生命周期函數--監聽頁面加載*/ onLoad: function (options) {//接收其他頁面傳遞過來的參數let movieId = options.id, that = this;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()}})} })

此時，程序的運行效果如下：

總結

以上是生活随笔為你收集整理的微信小程序电影详情功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。