27.实现上滑加载更多数据
movie-grid-template.wxml
more-movie.js
var util = require('../../../utils/util.js')
var app = getApp();
Page({
data:{
categoryTitle: '',
movies: {},
requsetUrl: '',
isEmpty: true,
totalCount: 0
},
onLoad: function (options) {
.
.
.
this.data.requsetUrl = dataUrl;
util.http(dataUrl, this.processDoubanData)
},
processDoubanData:function(data){
.
.
.
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;
},
onScrollLower:function(event){
var nextUrl = this.data.requsetUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl,this.processDoubanData)
},
28.设置loading状态
more-movie.js
onScrollLower: function (event) {
var nextUrl = this.data.requsetUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl, this.processDoubanData);
wx.showNavigationBarLoading()
},
processDoubanData:function(data){
.
.
this.setData({
movies: totalMovies
})
this.data.totalCount += 20;
wx.hideNavigationBarLoading()
},29.实现下拉刷新
more-movie.json
{
"enablePullDownRefresh": true
}more-movie.js
onPullDownRefresh: function () {
var refreshUrl = this.data.requsetUrl +
"?star=0&count=20";
this.data.movies = {};
this.data.isEmpty = true;
this.data.totalCount = 0;
util.http(refreshUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},
processDoubanData:function(data){
.
.
.
this.data.totalCount += 20;
wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
},30.电影搜索功能实现
movies.wxml
.
.
movies.wxss
@import "movie-grid/movie-grid-template.wxss";
.search {
background-color: #f2f2f2;
height: 80rpx;
width: 100%;
display: flex;
flex-direction: row;
}
.search-img {
margin: auto 0 auto 20rpx;
}
.search input {
height: 100%;
width: 600rpx;
margin-left: 20px;
font-size: 28rpx;
}
.placeholder {
font-size: 14px;
color: #d1d1d1;
margin-left: 20rpx;
}
.search-panel{
position:absolute;
top:80rpx;
}
.xx-img{
height: 30rpx;
width: 30rpx;
margin:auto 0 auto 10rpx;
}movies.js
Page({
data: {
inTheaters: {},
comingSoon: {},
top250: {},
searchResult: {},
containerShow: true,
searchPanelShow: false
},
onBindFocus: function (event) {
this.setData({
containerShow: false,
searchPanelShow: true
})
},
onCancelImgTap: function (event) {
this.setData({
containerShow: true,
searchPanelShow: false,
searchResult: {}
})
},
onBindBlur: function (event) {
var text = event.detail.value
var searchUrl = app.globalData.g_baseUrl + "/v2/movie/search?q=" + text;
this.getMovieList(searchUrl, "searchResult", "");
},
结果