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

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

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

实现效果图：

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

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

属性

  类型

                          描述

enablePullDownRefresh

Boolean

是否开启下拉刷新，详见页面相关事件处理函数。

设置js里onPullDownRefresh和onReachBottom方法

属性

   类型

　　　　　　　　　描述

onPullDownRefresh

function

页面相关事件处理函数——监听用户下拉动作

onReachBottom

function

页面上拉触发底事件的处理函数

下拉加载说明：

当处理完数据刷新后，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实现微信小程序下拉

属性

   类型

　　　　　　　　　描述

bindscrolltoupper

EventHandle

滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolower

EventHandle

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

index.wxml

class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">

{{item.name}}

{{item.short_description}}

class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">

{{item.name}}

{{item.short_description}}

加载中...

index.js

var url = "http://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("lowehttp://r");

},

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;

}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。