微信小程序之下拉加载和上拉刷新详解手机开发

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

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

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

下拉加载说明：

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

3 !--垂直滚动，这里必须设置高度-- 4 scroll-view scroll-top="{{scrollTop}}" scroll-y="true" 5 bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll" 6 view wx:for="{{list}}" 7 image src="{{item.pic_url}}" /image 8 view 9 text {{item.name}} /text 10 text {{item.short_description}} /text 11 /view 12 /view 13 /scroll-view 14 view 15 loading hidden="{{hidden}}" bindchange="loadingChange" 16 加载中... 17 /loading 18 /view 19 /view

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; 

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 : unlearn 

26 }, 

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 : list 

35 }); 

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.windowHeight 

57 }); 

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.scrollTop 

72 }); 

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

 3 .userinfo { 

 4 display: flex; 

 5 flex-direction: column; 

 6 align-items: center; 

 7 } 

 9 .userinfo-avatar { 

10 width: 128rpx; 

11 height: 128rpx; 

12 margin: 20rpx; 

13 border-radius: 50%; 

14 } 

16 .userinfo-nickname { 

17 color: #aaa; 

18 } 

20 .usermotto { 

21 margin-top: 200px; 

22 } 

24 /**/ 

26 scroll-view { 

27 width: 100%; 

28 } 

30 .item { 

31 width: 90%; 

32 height: 300rpx; 

33 margin: 20rpx auto; 

34 background: brown; 

35 overflow: hidden; 

36 } 

38 .item .img { 

39 width: 430rpx; 

40 margin-right: 20rpx; 

41 float: left; 

42 } 

44 .title { 

45 font-size: 30rpx; 

46 display: block; 

47 margin: 30rpx auto; 

48 } 

50 .description { 

51 font-size: 26rpx; 

52 line-height: 15rpx; 

53 }

效果图

 

6124.html

app程序应用开发手机开发无线开发移动端开发