接着上文继续~（上文地址：https://www.jianshu.com/p/0eff6f592d53）
分析："正在热映"和"即将上映"的电影列样式基本一致，只是数据不一致，因此考虑以自定义组件的方式实现一个共同页面，供二者使用。
自定义组件
-
创建components文件夹，创建新的页面movieList，如下图所示：
由于movieList是一个组件，需要在movieList.json中配置如下代码：
{
"component": true
}
- movieList组件是用于home页面中的，在home.json中注册这个组件，代码如下：
{
"usingComponents": {
"movieList": "../../components/movieList/movieList"
}
}
- 配置完以上之后就可以在home页面调用了，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代表唯一标志值，可以取到这个组件；value表示传到movieList页面的参数key，名称可以自定义
- 组件中的方法、属性使用以及获取传递过来的参数
Component({
properties: {
'sendValue':{ //与home.wxml中的key值对应
type: String, //必填，属性类型，包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: "" , //属性初始值
observer: function (newVal, oldVal) { //属性值被更改时的响应函数
//...
}
}
},
data: {
//...
},
methods: {
//...
}
})
获取传递过来的参数：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">
评分：{{item.rating.average}}
</view>
<view class="row row-content">
导演：<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}}人看过</text>
<button class="right-content-btn" bindtap="handleBuyTicket">购票</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>没有更多内容了</text>
</view>
</block>
</scroll-view>
</block>
</view>
- 编写样式文件movieList.wxss
"正在热映"和"即将上映"的样式相同，创建一个styles文件夹，再创建公共样式文件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;
}
- 编写样式文件movieList.js
这里需要访问接口获取数据， 在utils文件夹下建立api.js，封装访问接口的方法，获取数据，代码如下：
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, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
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),//连接前面一页的数据
showLoading: false,
showMore: true,
start: start + 1 //页数递增
})
} else {
this.setData({
showMore: false
})
}
})
},
handleScrollToLower(e) {
//如果没有更多的数据就不再加载
if (!this.data.showMore) {
return;
}
this.loadData(this.data.start);
},
handleRedirect(e) {
var id = e.currentTarget.dataset.id;
//电影详情页面跳转并传入当前id值 下一篇文章会详细讲解 这里的代码现在可以注释
wx.navigateTo({
url: '../../pages/detail/detail?id=' + id,
})
},
handleBuyTicket(e){
console.log("点击了购票按钮");
},
}
})
- 在home.wxml中引入movieList.wxml组件，并在home.js中调用加载列表数据的方法。
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组件的参数
},
//转发页面
onShareAppMessage(res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '来自豆瓣电影',
path: '/pages/index/index',
success: function (res) {
console.log('转发成功')
},
fail: function (res) {
console.log('转发失败')
}
}
},
handleHomeSelected(e){
this.setData({
homeSelected: true,
comingSelected: false,
movieType: 'in_theaters'
})
//调用movieList子组件的方法
this.movieList = this.selectComponent("#movieList");
this.movieList.loadData(0);//起始页为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();
}
到这里电影列表获取就完成啦~
最后还剩一个获取电影详情的页面，其中主要会涉及到横向滚动组件的使用，下一篇继续~
如果文中有什么不对的或者需要注意的地方欢迎大家指正，一起分享交流~
本文著作权归作者所有，如需转载，请联系本人并标明出处及原链接。
