~~~
//index.js
Page({
data:{
isShow:false,
},
onReachBottom(){
var length=this.data.movies.length;
if(length<this.data.total){
this.setData({
isShow:true
})
movieModel.getOnBottom(length,res=>{
this.handleData(res);
})
}
},
onLoad(){
// http("top250",this.handleData);
movieModel.getTop250(res=>{
this.handleData(res);
})
},
handleData(res){
var movies=[];
var subjects=res.data.subjects;
// subjects.forEach(item => {
// var imageUrl=item.images.large;
// var title=item.title.slice(0,6)+"...";
// var average=item.rating.average;
// var temp={
// imageUrl,
// title,
// average
// };
// movies.push(temp);
// })
for(var i=0;i<subjects.length;i++){
var imageUrl=subjects[i].images.large;
var title=subjects[i].title.slice(0,6)+"...";
var average=subjects[i].rating.average;
var id=subjects[i].id;
var temp={
imageUrl,
title,
average,
id,
}
movies.push(temp);
}
movies=this.data.movies.concat(movies);
this.setData({
movies,
total:res.data.total,
isShow:false
})
}
})
~~~
~~~
//index.wxml
<view class="container">
<movie-item wx:for="{{movies}}" wx:key="{{index}}" movie="{{item}}"></movie-item>
<view class="loading" wx:if="{{isShow}}">
<image src="/images/loading.gif"></image>
加載更多數據
</view>
</view>
~~~
~~~
//index.wxss css布局
.container{
padding:30rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
movie-item{
margin-top:20px;
}
.loading{
position:absolute;
z-index: 200;
bottom: 0;
left: 0;
background: #fff;
width: 750rpx;
border-top:1rpx solid #eee;
display: flex;
justify-content: center;
height: 80rpx;
align-items: center;
}
.loading image{
width: 30rpx;
height: 30rpx;
}
~~~
