微信小程序之下拉加載和上拉刷新

微信小程序下拉加載和上拉刷新兩種實現方法

方法一：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 <!--index.wxml-->
 2 <view class="container" style="padding:0rpx">
 3   <!--垂直滾動，這裏必須設置高度-->
 4     <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
 5         class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
 6         <view class="item" wx:for="{{list}}">
 7             <image class="img" src="{{item.pic_url}}"></image>
 8             <view class="text">
 9                 <text class="title">{{item.name}}</text>
10                 <text class="description">{{item.short_description}}</text>
11             </view>
12         </view>
13     </scroll-view>
14     <view class="body-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;
 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 : 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**/
 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 }

效果圖