第八章 加载更多电影

wxml添加滚动触底事件

<scroll-view class='gird-container' scroll-y="true" scroll-x="false" lower-threshold="0" bindscrolltolower="onScrollLower">
<block wx:for="{{movies}}" wx:for-item="item" wx:key="{{item.movieId}}">
<view class='grid-single-container'>
<template is="movieTemplate" data="{{...item}}" />
</view>
</block>
</scroll-view>

js加载更多电影

引用全局变量
var app = getApp();
var util = require('../../../utils/util.js');

加载
onLoad: function (options) {
var name = options.name;
var id = options.moremovieid
this.setData({
name
});
this.requestMovieData(name);
},

更多电影的类型名作为Bartitle

onReady: function () {
// 动态设置导航栏标题
// onLoad里不能操作UI,onShow也不行
wx.setNavigationBarTitle({
title: this.data.name,
});
},

电影获取方法

requestMovieData: function (name) {
var baseUrl = app.globalData.doubanBase;
var dataUrl = '';
switch (name) {
case "正在热映":
dataUrl = baseUrl + 'v2/movie/in_theaters';
break;
case "即将上映":
dataUrl = baseUrl + 'v2/movie/coming_soon';
break;
case "Top250":
dataUrl = baseUrl + 'v2/movie/top250';
break;
}
this.setData({
dataUrl
});
this.getMovieList(dataUrl);
},

获取电影方法的操作步骤

getMovieList: function (url) {
var that = this;
wx.showLoading({
title: '加载中',
});
util.sendHttpRequest(url, 'GET')
.then(data => {
if (data.subjects.length == 0) {
wx.showToast({
title: '已经没有数据了’,
});
return;
}
that.handlerResponseData(data);
})
.catch(error => {
util.showToast('数据加载失败！请重试');
console.log('error======' + error);
});
},

处理获得的电影，拼接已加载的和新加载的数据

handlerResponseData: function (data) {
var movies = [];
for (var i in data.subjects) {
// 获取subject数组内的每一个子元素
var subject = data.subjects[i];
var title = subject.title;
// 处理标题过长
if (title.length >= 6) {
title = title.substring(0, 6) + "...";
}
// 用一个临时对象保存item数据
var temp = {
movieId: subject.id,
title: title,
stars: util.converToStarsArray(subject.rating.stars),
average: subject.rating.average,
image: subject.images.large
}
movies.push(temp);
}
var totalMovies = {};
if (this.data.isEmpty) {        
// 第一次加载数据
totalMovies = movies;
// 赋值之后已经不是第一次了,置为false
this.data.isEmpty = false;
} else {
// 加载更多数据
// concat() 方法用于连接两个或多个数组,不会改变原数组
totalMovies = this.data.movies.concat(movies);
}
// 更新数据源
this.setData({
movies: totalMovies
});
// 总条目数自增20
this.data.totalCount += 20;
wx.stopPullDownRefresh();
wx.hideLoading();
},

上滑加载事件

onScrollLower: function (event) {
console.log("上滑");
var nextDataUrl = this.data.dataUrl + "?start=" + this.data.totalCount + "&count=20";
this.getMovieList(nextDataUrl);
},

下拉刷新事件

onPullDownRefresh: function () {
var refreshUrl = this.data.dataUrl +
"?start=0&count=20";
this.setData({
movies: {},
isEmpty: true,
totalCount: 0
});
this.getMovieList(refreshUrl);
},

movie-grid的wxml

<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
<!-- 上划加载更多电影 ,bindscrolltolower添加触底事件-->
<scroll-view class='gird-container' scroll-y="true" scroll-x="false" lower-threshold="0" bindscrolltolower="onScrollLower">
<block wx:for="{{movies}}" wx:for-item="item" wx:key="{{item.movieId}}">
<view class='grid-single-container'>
<template is="movieTemplate" data="{{...item}}" />
</view>
</block>
</scroll-view>
</template>