小程序学习——上拉加载and下拉刷新(适用于130400以上版本

2019-03-25  本文已影响0人  默色留恋

在130400版本中scroll-view组件与 onPullDownRefresh不可以同时使用,上拉加载和下拉刷新功能是在.js的 onReachBottom: function () {}和 onPullDownRefresh: function () {}里实现的<scroll-view>标签改为view,而且不需要设置高度

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function () {
  console.log("上拉加载")
  var nexturl = this.data.url + "?start=" + this.data.totalnum + "&count=20";
  util.http(nexturl, this.processdoubanData);

  // loading状态
  wx.showNavigationBarLoading()
},
/**
 * 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
  console.log("下拉刷新")
  var refreshUrl = this.data.url + "?start=0&count=20";
  this.data.movies={};
  this.data.isEmpty=true;
  util.http(refreshUrl, this.processdoubanData);
  // loading状态
  wx.showNavigationBarLoading();
},

processdoubanData: function(data) {
  var movies = [];  
  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.totalnum += 20;

  //loading状态影藏
  wx.hideNavigationBarLoading();

  //结束下拉刷新
  wx.stopPullDownRefresh();
},
上一篇 下一篇

猜你喜欢

热点阅读