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

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

实现效果图：

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

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

属性页面相关事件处理函数。设置js里onPullDownRefresh和onReachBottom方法

属性页面相关事件处理函数——监听用户下拉动作ottom页面上拉触发底事件的处理函数

下拉加载说明：

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

rush:js;"> 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实现微信小程序下拉

属性touppertoupper 事件滚动到底部/右边，会触发 scrolltolower 事件

index.wxml

rush:js;">

toupper="topLoad" bindscroll="scroll">

index.js

rush:js;"> var url = "http://www.jb51.cc/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

rush:xml;"> /**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;
}

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

上拉刷新上拉刷新几种方法上拉刷新实例详解微信小程序下拉加载

上一篇：微信小程序简单教程实例详解下一篇：微信小程序两种滑动方式横向滑动，

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