接著上文繼續(xù)~（上文地址：http://www.reibang.com/p/0eff6f592d53）
分析："正在熱映"和"即將上映"的電影列樣式基本一致，只是數(shù)據(jù)不一致粉捻，因此考慮以自定義組件的方式實(shí)現(xiàn)一個(gè)共同頁(yè)面，供二者使用肩刃。
自定義組件
-
創(chuàng)建components文件夾，創(chuàng)建新的頁(yè)面movieList树酪，如下圖所示：
由于movieList是一個(gè)組件大州，需要在movieList.json中配置如下代碼：
{
"component": true
}
- movieList組件是用于home頁(yè)面中的续语，在home.json中注冊(cè)這個(gè)組件厦画，代碼如下：
{
"usingComponents": {
"movieList": "../../components/movieList/movieList"
}
}
- 配置完以上之后就可以在home頁(yè)面調(diào)用了，home.wxml代碼如下：
<view class="page">
<view class="nav">
<view class="{{homeSelected?'current':'default'}}" bindtap="handleHomeSelected">正在熱映</view>
<view class="{{comingSelected?'current':'default'}}" bindtap="handleComingSelected">即將上映</view>
</view>
<view class="{{homeSelected?'show':'hidden'}}">
<!-- 正在熱映 -->
<movieList id="movieList" sendValue="{{movieType}}"></movieList>
</view>
<view class="{{comingSelected?'show':'hidden'}}">
<!-- 即將上映 -->
<movieList id="movieComingList" sendValue="{{movieType}}"></movieList>
</view>
</view>
id代表唯一標(biāo)志值根暑，可以取到這個(gè)組件；value表示傳到movieList頁(yè)面的參數(shù)key排嫌，名稱(chēng)可以自定義
- 組件中的方法、屬性使用以及獲取傳遞過(guò)來(lái)的參數(shù)
Component({
properties: {
'sendValue':{ //與home.wxml中的key值對(duì)應(yīng)
type: String, //必填淳地，屬性類(lèi)型怖糊，包括：String, Number, Boolean, Object, Array, null（表示任意類(lèi)型）
value: "" , //屬性初始值
observer: function (newVal, oldVal) { //屬性值被更改時(shí)的響應(yīng)函數(shù)
//...
}
}
},
data: {
//...
},
methods: {
//...
}
})
獲取傳遞過(guò)來(lái)的參數(shù)：this.properties.sendValue
獲取電影列表
- 編輯movieList.wxml
<view class="page">
<block wx:if="{{showLoading}}">
<view class="page-loading">
<image class="loading-img" src="../../images/loading.gif" />
<text>玩命加載中...</text>
</view>
</block>
<block wx:else>
<scroll-view style="height:1100px;" scroll-y="{{true}}" scroll-top="0"
bindscrolltolower="handleScrollToLower">
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="list" data-id="{{item.id}}" bindtap="handleRedirect">
<view class="left">
<image src="{{item.images.large}}" />
</view>
<view class="middle">
<view class="row row-title">
{{item.original_title}}
</view>
<view class="row row-content">
評(píng)分：{{item.rating.average}}
</view>
<view class="row row-content">
導(dǎo)演：<view wx:for="{{item.directors}}" wx:for-item="directors" wx:key="{{index}}">
{{directors.name}}
</view>
</view>
<view class="row row-content">
主演：<view wx:for="{{item.casts}}" wx:for-item="casts" wx:key="{{index}}">
{{casts.name}} <text wx:if="{{index+1-item.casts.length < 0}}">/</text>
</view>
</view>
</view>
<view class="right right-content">
<text>{{item.reviews_count}}人看過(guò)</text>
<button class="right-content-btn" bindtap="handleBuyTicket">購(gòu)票</button>
</view>
</view>
</block>
<block wx:if="{{showMore}}">
<view class="page-loading">
<image class="loading-img" src="../../images/loading.gif" />
<text>玩命加載中...</text>
</view>
</block>
<block wx:else>
<view class="page-loading">
<text>沒(méi)有更多內(nèi)容了</text>
</view>
</block>
</scroll-view>
</block>
</view>
- 編寫(xiě)樣式文件movieList.wxss
"正在熱映"和"即將上映"的樣式相同帅容，創(chuàng)建一個(gè)styles文件夾，再創(chuàng)建公共樣式文件movieLayout.wxss伍伤，代碼如下：
.list{
display:flex;
border-bottom: 1px solid #dfdfdf;
}
.left{
width:25%;
margin-left:20rpx
}
.left image{
width:100%;
height:280rpx;
}
.middle{
width:55%;
margin-right:20rpx
}
.right{
width:20%;
}
.left,.middle,.right{
height:280rpx;
margin-bottom:20rpx;
margin-top:20rpx;
}
.row{
width:100%;
margin:0 5rpx 5rpx 15rpx;
}
.row-title{
font-size:15px;
font-weight: bold;
}
.row-content,.right-content,.right-content-btn{
font-size:12px;
}
.row view{
display: inline-block;
padding-right:5rpx;
}
.right-content{
color:#F76D61;
margin-right:10rpx;
}
.right-content-btn{
border: 1px solid #F76D61;
color:#F76D61;
margin-top:20rpx;
margin-left:0;
width:130rpx;
height:55rpx;
line-height:55rpx;
background-color: #ffffff;
}
在movieList.wxss文件中引入公共樣式movieLayout.wxss：
@import "../../styles/movieLayout";
.page{
margin-top:80rpx;
height:100%;
}
.page-loading{
display:flex;
text-align: center;
justify-content: center;
align-items: center;
padding-top:10rpx;
}
.page-loading .loading-img{
margin-right:5rpx;
width:30rpx;
height:30rpx;
}
.sv{
height:1000rpx;
}
- 編寫(xiě)樣式文件movieList.js
這里需要訪問(wèn)接口獲取數(shù)據(jù)并徘， 在utils文件夾下建立api.js，封裝訪問(wèn)接口的方法扰魂，獲取數(shù)據(jù)麦乞，代碼如下：
var API_URL = 'http://t.yushu.im/v2/movie';
function fetchApi(type,params){
return new Promise((resolve,reject)=>{
wx.request({
url: `${API_URL}/${type}`, //模板字符串
data: params,
header: {
'content-type': 'application/json'
},
success: resolve,
fail: reject
})
})
}
//http://t.yushu.im//v2/movie/in_theaters?start=0&count=20
module.exports = {
//獲取電影列表
getList(type,start=0,count=20){
return fetchApi(type, {"start": start*count,"count":count})
.then(res=>res.data)
},
//獲取電影詳情
getDetail(id){
return fetchApi("/subject/"+id)
.then(res=>res.data)
}
}
movieList.js代碼：
var api = require('../../utils/api')
Component({
properties: {
'sendValue':{
type: String, //必填劝评，目前接受的類(lèi)型包括：String, Number, Boolean, Object, Array, null（表示任意類(lèi)型）
value: "" ,
observer: function (newVal, oldVal) {
this.setData({
list: [],//電影列表
start: 0
})
}
}
},
data: {
start: 0,
list: [],
showLoading: true,
showMore: true
},
methods: {
loadData(start) {
console.log(this.properties.sendValue)
//http://t.yushu.im/v2/movie/in_theaters?start=0&count=20
api.getList(this.properties.sendValue, start)
.then(res => {
if (res.subjects.length > 0) {
this.setData({
list: this.data.list.concat(res.subjects),//連接前面一頁(yè)的數(shù)據(jù)
showLoading: false,
showMore: true,
start: start + 1 //頁(yè)數(shù)遞增
})
} else {
this.setData({
showMore: false
})
}
})
},
handleScrollToLower(e) {
//如果沒(méi)有更多的數(shù)據(jù)就不再加載
if (!this.data.showMore) {
return;
}
this.loadData(this.data.start);
},
handleRedirect(e) {
var id = e.currentTarget.dataset.id;
//電影詳情頁(yè)面跳轉(zhuǎn)并傳入當(dāng)前id值 下一篇文章會(huì)詳細(xì)講解 這里的代碼現(xiàn)在可以注釋
wx.navigateTo({
url: '../../pages/detail/detail?id=' + id,
})
},
handleBuyTicket(e){
console.log("點(diǎn)擊了購(gòu)票按鈕");
},
}
})
- 在home.wxml中引入movieList.wxml組件姐直，并在home.js中調(diào)用加載列表數(shù)據(jù)的方法。
home.wxml：
<view class="page">
<view class="nav">
<view class="{{homeSelected?'current':'default'}}" bindtap="handleHomeSelected">正在熱映</view>
<view class="{{comingSelected?'current':'default'}}" bindtap="handleComingSelected">即將上映</view>
</view>
<view class="{{homeSelected?'show':'hidden'}}">
<!-- 正在熱映 -->
<movieList id="movieList" sendValue="{{movieType}}"></movieList>
</view>
<view class="{{comingSelected?'show':'hidden'}}">
<!-- 即將上映 -->
<movieList id="movieComingList" sendValue="{{movieType}}"></movieList>
</view>
</view>
home.js：
var api = require('../../utils/api')
Page({
data: {
homeSelected:true,
comingSelected:false,
movieType:'' //傳到movieList.wxml組件的參數(shù)
},
//轉(zhuǎn)發(fā)頁(yè)面
onShareAppMessage(res) {
if (res.from === 'button') {
// 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
console.log(res.target)
}
return {
title: '來(lái)自豆瓣電影',
path: '/pages/index/index',
success: function (res) {
console.log('轉(zhuǎn)發(fā)成功')
},
fail: function (res) {
console.log('轉(zhuǎn)發(fā)失敗')
}
}
},
handleHomeSelected(e){
this.setData({
homeSelected: true,
comingSelected: false,
movieType: 'in_theaters'
})
//調(diào)用movieList子組件的方法
this.movieList = this.selectComponent("#movieList");
this.movieList.loadData(0);//起始頁(yè)為0
},
handleComingSelected(e) {
this.setData({
homeSelected: false,
comingSelected: true,
movieType: 'coming_soon'
})
this.movieList = this.selectComponent("#movieComingList");
this.movieList.loadData(0);
},
onReady: function () {
this.handleHomeSelected();
}
到這里電影列表獲取就完成啦~
最后還剩一個(gè)獲取電影詳情的頁(yè)面蒋畜，其中主要會(huì)涉及到橫向滾動(dòng)組件的使用声畏，下一篇繼續(xù)~
如果文中有什么不對(duì)的或者需要注意的地方歡迎大家指正，一起分享交流~
本文著作權(quán)歸作者所有百侧，如需轉(zhuǎn)載砰识，請(qǐng)聯(lián)系本人并標(biāo)明出處及原鏈接能扒。
