微信小程序 详解下拉加载与上拉刷新实现方法

onPullDownRefresh(){　　console.log('--------下拉刷新-------')　　wx.showNavigationBarLoading() //在标题栏中显示加载 　　wx.request({     url: 'https://URL',     data: {},     method: 'GET',     // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT     // header: {}, // 设置请求的 header     success: function(res){      // success     },     fail: function() {      // fail     },     complete: function() {      // complete      wx.hideNavigationBarLoading() //完成停止加载      wx.stopPullDownRefresh() //停止下拉刷新     }  })       

<!--index.wxml--><view class="container" style="padding:0rpx"> <!--垂直滚动，这里必须设置高度-->  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"     class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">    <view class="item" wx:for="{{list}}">      <image class="img" src="{{item.pic_url}}"></image>      <view class="text">        <text class="title">{{item.name}}</text>        <text class="description">{{item.short_description}}</text>      </view>    </view>  </scroll-view>  <view class="body-view">    <loading hidden="{{hidden}}" bindchange="loadingChange">      加载中...    </loading>  </view></view>

var url = "http://www.imooc.com/course/ajaxlist";var page =0;var page_size = 5;var sort = "last";var is_easy = 0;var lange_id = 0;var pos_id = 0;var unlearn = 0;// 请求数据var loadMore = function(that){  that.setData({    hidden:false  });  wx.request({    url:url,    data:{      page : page,      page_size : page_size,      sort : sort,      is_easy : is_easy,      lange_id : lange_id,      pos_id : pos_id,      unlearn : unlearn    },    success:function(res){      //console.info(that.data.list);      var list = that.data.list;      for(var i = 0; i < res.data.list.length; i++){        list.push(res.data.list[i]);      }      that.setData({        list : list      });      page ++;      that.setData({        hidden:true      });    }  });}Page({ data:{  hidden:true,  list:[],  scrollTop : 0,  scrollHeight:0 }, onLoad:function(){  //  这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值   var that = this;   wx.getSystemInfo({     success:function(res){       that.setData({         scrollHeight:res.windowHeight       });     }   });    loadMore(that); }, //页面滑动到底部 bindDownLoad:function(){     var that = this;   loadMore(that);   console.log("lower"); }, scroll:function(event){  //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。   this.setData({     scrollTop : event.detail.scrollTop   }); }, topLoad:function(event){  //  该方法绑定了页面滑动到顶部的事件，然后做上拉刷新   page = 0;   this.setData({     list : [],     scrollTop : 0   });   loadMore(this);   console.log("lower"); }})

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}/**/scroll-view { width: 100%;}.item { width: 90%; height: 300rpx; margin: 20rpx auto; background: brown; overflow: hidden;}.item .img { width: 430rpx; margin-right: 20rpx; float: left;}.title { font-size: 30rpx; display: block; margin: 30rpx auto;}.description { font-size: 26rpx; line-height: 15rpx;}