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

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

实现效果图：

方法一：onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先要在json文件里设置window属性

设置js里onPullDownRefresh和onReachBottom方法

下拉加载说明：

当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

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() //停止下拉刷新
    }
 })

方法二：

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉

index.wxml

<!--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>

index.js

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

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！