微信小程序下拉加载和上拉刷新两种实现方法

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;}