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

方法一：onPullDownRefresh和onReachBottom方法實現小程序下拉加載和上拉刷新

首先要在json文件里設置window屬性

設置js里onPullDownRefresh和onReachBottom方法

下拉加載說明：

當處理完數據刷新后，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實現微信小程序下拉

index.wxml

<!--index.wxml-->
  <view class="container" style="padding:0rpx">
   <!--垂直滾動，這里必須設置高度-->
     <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
         class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
         <view class="item" wx:for="{{list}}">
             <image class="img" src="{{item.pic_url}}"></image>
             <view class="text">
                 <text class="title">{{item.name}}</text>
                 <text class="description">{{item.short_description}}</text>
             </view>
         </view>
     </scroll-view>
     <view class="body-view">
         <loading hidden="{{hidden}}" bindchange="loadingChange">
             加載中...
         </loading>
     </view>
 </view>

index.js

 var url = "http://www.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("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

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