小程序--上划加载更多 下拉刷新

var util = require('../../../utils/util.js');
var app = getApp();
Page({
  data: {
    totalCount:0,
    isEmpty:true,
    requestUrl: "",
  },
  //使用scroll-view组件 设置高度 当滑动此高度时就会触发此组建的bindscrolltolower 这个绑定
//执行此函数(onScrollLower()) 此函数会加载出更多的数据，那么所以说就要有计数的变量，看看请求多少的事件了，那么请求到了新数据也不可以不要旧数据了，所以如果你进行了上拉加载更多的话，就要把原来的数据进行拼接上，因为是异步回调的问题吧，这个也不是很清晰，所以需要设置一个状态变量，看看是否是第一次请求，如果是初始状态是true 进行初始化后变为false,以后的每一次请求都是加载更多数据
  onScrollLower:function(){
   var nextUrl =  this.data.requestUrl + "?start=" + this.data.totalCount + "&count=20";
    util.http(nextUrl, this.processDoubanData)
    wx.showNavigationBarLoading()
//执行下滑加载更多时显示加载中  当请求完毕时关闭showLoading（），也就是执行 wx.hideLoading()
    wx.showLoading({
      title: '加载中',
    })
  },

  onLoad: function (options) {
    var category = options.category
    console.log(category)
    var dataUrl=""
    switch (category){
      case "正在热映":
        dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters"
      break;
      case "即将上映":
         dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon" ;
        //  dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon"
      break;
      case "豆瓣Top250":
        dataUrl = app.globalData.doubanBase + "/v2/movie/top250"
      break;
    }
    this.setData({
      requestUrl: dataUrl
    })
    wx.showNavigationBarLoading()
    wx.showLoading({
      title: '加载中',
    })
    util.http(dataUrl, this.processDoubanData)
    wx.setNavigationBarTitle({
      title: category
    })
  },

  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)
    }
    var totalMovies = {}

    //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起
    if (!this.data.isEmpty) {
      totalMovies = this.data.movies.concat(movies);
    }
    else {
      totalMovies = movies;
      this.data.isEmpty = false;
      
    }
    console.log(totalMovies)
    this.setData({
      movies: totalMovies
    });

    wx.hideNavigationBarLoading()
    wx.hideLoading()
    wx.stopPullDownRefresh()
    var totalCount = this.data.totalCount
    totalCount = totalCount + 20;
    this.setData({
      totalCount: totalCount
    })

  },
  
  
  
  }
})

function http(url,callBack){
  wx.request({
    url: url,
    header: {
      "Content-Type":"json"
    },
    method: 'GET',
    success: function(res) {
     callBack(res.data)

    },
    fail: function(res) {},
   
  })
}
module.exports = {
  http: http
}

 

上划加载数据，就是把上次加载的数量记录起来，以后从这个位置开始加载更多的数据，把心请求到的数据和原来的数据进行拼接 ，形成加载后的总数据，进行显示。

能不能把请求到的数据显示出来，不进行拼接，或者说是追加在页面的下面，

或者说 数据发生变化（位置，数量），我是要接着请求呢，还是总请求，那么接着请求的话就可能出现重复数据（添加了数据），而总请求的话可能会消耗很多，-------------------看需求！！！

数据发生变化（第一名变为第三名），数据不多不少，仅仅位置变化的话，就进行刷新，

而数据多了或少了的话，多了的话，象qq一样，接着从老数据的地方查，新数据“不算”数据，但是给了你一个提示，此时需要查看新数据，就要刷新，也就是重新请求数据，新数据是数据了。

 

那么下面说一说刷新，

刷新和刚刚进入重新加载数据一样，所以当刷新时要把说有的变量回复初始状态

onPullDownRefresh: function (event) {
    //回复三个变量
    var movies = this.data.movies
         movies = {};
    var  isEmpty = this.data.isEmpty
         isEmpty = true;
    var  totalCount = this.data.totalCount
         totalCount = 0;
         this.setData({
           movies: movies,
           isEmpty: isEmpty,
           totalCount: totalCount
         })
     //进行初始请求
    var refreshUrl = this.data.requestUrl + "?star=0&count=20";
    util.http(refreshUrl, this.processDoubanData);

    wx.showLoading({
      title: '加载中',
    })
   //执行刷新是显示loading
    wx.showNavigationBarLoading();
  },