一、上滑加载更多数据
wxml;
<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
<block wx:for="{{movies}}" wx:for-item="movie">
<view class="single-view-container">
<template is="movieTemplate" data="{{...movie}}" />
</view>
</block>
</scroll-view>
</template>
js
// wx.showNavigationBarLoading()组件
var app = getApp()
var util = require('../../../utils/util.js')
Page({
data: {
navigateTitle: "", //设置中间变量 把onload中的获取到的标题函数传入到onReady中使用
requestUrl: "",
totalCount: 0,
isEmpty: true //是否是第一次加载
},
onLoad: function (options) {
var category = options.category;//获取url传递的参数
var dataUrl = "";//记录此时加载的url的值 用于滑动加载
this.data.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"; //默认是star =0 &count=20
break;
}
wx.setNavigationBarTitle({
title: this.data.navigateTitle
})
this.data.requestUrl = dataUrl;
util.http(dataUrl, this.processDoubanData);
},
//数据处理
processDoubanData: function (moviesDouban) {
var movies = [];
for (var idx in moviesDouban.subjects) {
var subject = moviesDouban.subjects[idx];
var title = subject.title;
if (title.length >= 6) {
title = title.substring(0, 6) + "...";
}
// [1,1,1,1,1] [1,1,1,0,0]
var temp = {
stars: util.convertToStarsArray(subject.rating.stars),
title: title,
average: subject.rating.average,
coverageUrl: subject.images.large,
movieId: subject.id
}
movies.push(temp)
}
//每次数据绑定之前 totalCount做一次累加
//加载更多 jq是加载append的思想 但是小程序没有dom 整体思路:第一次是20条数据 第二次是40条 数据绑定每次都setdata
//每次加载都需要数据更新一下
var totalMovies = {}
//如果要绑定新加载的数据,那么需要同旧有的数据合并在一起
if (!this.data.isEmpty) {
totalMovies = this.data.movies.concat(movies);
}
else {
totalMovies = movies;
this.data.isEmpty = false;
}
this.setData({
movies:totalMovies
})
this.data.totalCount += 20;
},
callBack:function(data){
console.log(data);
},
//上滑加载更多函数 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。
onScrollLower: function (event) {
//上滑动加载 变化的是加载数据的序号初始1-20 再次上滑加载20-40 star= &count= 由于后台接口没有那么多数据看不到效果
//设定要加载的url
var nextUrl = this.data.requestUrl + "?start=" + this.data.totalCount +"&count=20"
//获取数据
util.http(nextUrl, this.processDoubanData);
},
onReady: function (event) {
wx.setNavigationBarTitle({
title: this.data.navigateTitle
})
}
})
二、下拉刷新
1、使用单页的json文件配置
{
"enablePullDownRefresh":
true
}
2、APP.json window配置
"window": {
"enablePullDownRefresh":
true
},
3、js
enablePullDownRefresh会触发函数
onPullDownRefresh
//上拉刷新
onPullDownRefresh:function(event){
console.log('下拉刷新');
var refreshUrl = this.data.requestUrl +
"?star=0&count=20";
this.data.movies = {};
this.data.isEmpty = true;
this.data.totalCount = 0;
util.http(refreshUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},