### 實現上拉加載
`movie-grid-template.wxml`
~~~
<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
<view class="grid-container">
<block wx:for="{{movies}}" wx:for-item="movie">
<view class="single-view-container">
<template is="movieTemplate" data="{{movie}}" />
</view>
</block>
</view>
</template>
~~~
`movies.wxss`
~~~css
.single-view-container{
float: left;
margin-bottom: 40rpx;
}
.grid-container{
*** height: 1300rpx;
margin: 40rpx 0 40rpx 6rpx;
}
~~~
`more-movie.js`
~~~
data: {
*** requestUrl:"",
***totalCount:0,
***isEmpty:true
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
var category = options.category;
this.setData({
navigateTitle:category
})
var dataUrl = "";
switch (category) {
case "正在熱映":
dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters";
break;
case "即將上映":
dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon";
break;
case "Top250":
dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
}
***this.data.requestUrl = dataUrl;
util.http(dataUrl, this.processDoubanData);
},
processDoubanData: function (moviesDouban) {
var movies = [];
for (var ids in moviesDouban.subjects) {
var subject = moviesDouban.subjects[ids];
var title = subject.title;
if (title.length > 6) {
title = title.substring(0, 6) + "...";
}
var temp = {
stars: util.convertToStarsArray(subject.rating.stars),
title: title,
average: subject.rating.average,
coverageUrl: subject.images.large,
movieId: subject.id
}
movies.push(temp);
}
***var totalMovies = {};
this.data.totalCount += 20;
if(!this.data.isEmpty){
totalMovies = this.data.movies.concat(movies);
}else{
totalMovies = movies;
this.data.isEmpty = false;
}
***this.setData({
movies:totalMovies
});
},
***onReachBottom:function(event){
var nextUrl = this.data.requestUrl + "?start="+this.data.totalCount+"&count=20";
util.http(nextUrl,this.processDoubanData);
wx.showNavigationBarLoading();
},
~~~
### 加載狀態
~~~javascript
wx.showNavigationBarLoading();
wx.hideNavigationBarLoading();
~~~
