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", "");  },

结果