取消上拉加载 微信小程序_微信小程序之下拉加载和上拉刷新

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

方法一：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

1

2

3

4

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

6

7

8

9 {{item.name}}

10 {{item.short_description}}

11

12

13

14

15

16 加载中...17

18

19

index.js

1 var url = "http://www.imooc.com/course/ajaxlist";2 var page =0;3 var page_size = 5;4 var sort = "last";5 var is_easy = 0;6 var lange_id = 0;7 var pos_id = 0;8 var unlearn = 0;9

10

11 //请求数据

12 var loadMore = function(that){13 that.setData({14 hidden:false

15 });16 wx.request({17 url:url,18 data:{19 page : page,20 page_size : page_size,21 sort : sort,22 is_easy : is_easy,23 lange_id : lange_id,24 pos_id : pos_id,25 unlearn : unlearn26 },27 success:function(res){28 //console.info(that.data.list);

29 var list =that.data.list;30 for(var i = 0; i < res.data.list.length; i++){31 list.push(res.data.list[i]);32 }33 that.setData({34 list : list35 });36 page ++;37 that.setData({38 hidden:true

39 });40 }41 });42 }43 Page({44 data:{45 hidden:true,46 list:[],47 scrollTop : 0,48 scrollHeight:0

49 },50 onLoad:function(){51 //这里要注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值

52 var that = this;53 wx.getSystemInfo({54 success:function(res){55 that.setData({56 scrollHeight:res.windowHeight57 });58 }59 });60 loadMore(that);61 },62 //页面滑动到底部

63 bindDownLoad:function(){64 var that = this;65 loadMore(that);66 console.log("lower");67 },68 scroll:function(event){69 //该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。

70 this.setData({71 scrollTop : event.detail.scrollTop72 });73 },74 topLoad:function(event){75 //该方法绑定了页面滑动到顶部的事件，然后做上拉刷新

76 page = 0;77 this.setData({78 list : [],79 scrollTop : 0

80 });81 loadMore(this);82 console.log("lower");83 }84 })

index.wxss

1 /**index.wxss**/

2

3 .userinfo {4 display: flex;5 flex-direction: column;6 align-items: center;7 }8

9 .userinfo-avatar {10 width: 128rpx;11 height: 128rpx;12 margin: 20rpx;13 border-radius: 50%;14 }15

16 .userinfo-nickname {17 color: #aaa;18 }19

20 .usermotto {21 margin-top: 200px;22 }23

24 /**/

25

26 scroll-view {27 width: 100%;28 }29

30 .item {31 width: 90%;32 height: 300rpx;33 margin: 20rpx auto;34 background: brown;35 overflow: hidden;36 }37

38 .item .img {39 width: 430rpx;40 margin-right: 20rpx;41 float: left;42 }43

44 .title {45 font-size: 30rpx;46 display: block;47 margin: 30rpx auto;48 }49

50 .description {51 font-size: 26rpx;52 line-height: 15rpx;53 }

效果图