碼上歡樂
相關內容    簡體    繁體

微信小程序實現上拉和下拉加載更多

本文轉載自   查看原文   2019-12-06 15:06   3086 

 在上一篇文章中，我們知道了使用 scroll-view 可以實現上拉加載更多，但是由於 scroll-view 的限制，它無法實現下拉加載更多，這篇文章我們使用 view 組件來實現 上拉和下拉加載更多。

 

下拉加載更多：

      1、在響應的 xxx.json 配置文件依次配置如下配置

            >> enablePullDownRefresh:true  表示開啟下拉刷新

 　　　>>onReachBottomDistance:0  

            >> backgroundTextStyle              下拉 loading 的樣式，僅支持 dark/light

            >> backgroundColor                    窗口的背景色

      2、上方后面2個沒有設置好，在下拉時，頁面頂部會出現一塊白色的區域。

      3、在下拉刷新時，不可使用 wx.showLoading 提示（其余的提示我沒有測試），否則在 ios 下頁面回彈過多，導致看不到頂部的那個提示頁面刷新的區域。

      4、頁面下拉會觸發 onPullDownRefresh 事件

      5、防止 onPullDownRefresh 多次觸發，導致多次請求

 

上拉加載更多：

     1、在對應的 xxx.json 中配置(不是必須的)

           >> onReachBottomDistance          頁面上拉觸底事件觸發時距頁面底部距離，單位為px

     2、頁面上拉在小於或等於  onReachBottomDistance  的距離時，會觸發 onReachBottom 事件

 

實現效果：


 

代碼實現：

1、頁面布局 loadMore.wxml 文件的編寫

Java代碼   收藏代碼
  1. <view class='view-container'>  
  2.   <block wx:for='{{articles}}' wx:key='{{item.id}}'>  
  3.     <view class='articles-container'>  
  4.       <view class='info'>  
  5.         <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}  
  6.         <text class='created-at'>{{item.created_at}}</text>  
  7.         <text class='category'>{{item.category}}</text>  
  8.       </view>  
  9.     </view>  
  10.   </block>  
  11.   <view class='data-loading' hidden='{{hidden}}'>  
  12.     數據加載中...  
  13.   </view>  
  14. </view>  

2、樣式編寫 loadMore.wxss 文件的編寫

Java代碼   收藏代碼
  1. .view-container {  
  2.   #fff;  
  3. }  
  4.   
  5. .data-loading {  
  6.   height: 100rpx;  
  7.   line-height: 100rpx;  
  8.   #eee;  
  9.   text-align: center;  
  10.   font-size: 14px;  
  11. }  
  12.   
  13. .articles-container {  
  14.   border-bottom: 1px solid #eee;  
  15.   margin: 30rpx 10rpx;  
  16.   #eee;  
  17. }  
  18.   
  19. .articles-container .info {  
  20.   font-size: 12px;  
  21.   margin: 20rpx 0rpx;  
  22.   height: 100%;  
  23.   display: inline-block;  
  24. }  
  25.   
  26. .articles-container .info .avatar {  
  27.   width: 60rpx;  
  28.   height: 60rpx;  
  29.   margin-right: 10rpx;  
  30.   border-radius: 60rpx;  
  31.   display: inline-block;  
  32.   vertical-align: middle;  
  33. }  
  34.   
  35. .articles-container .info .created-at {  
  36.   margin: 0px 20rpx;  
  37.   display: inline-block;  
  38.   vertical-align: middle;  
  39. }  
  40.   
  41. .articles-container .info .category {  
  42.   color: #3399ea;  
  43.   display: inline-block;  
  44.   vertical-align: middle;  
  45. }  

3、js 控制 loadMore.js 文件的編寫

Java代碼   收藏代碼
  1. Page({  
  2.   
  3.   data: {  
  4.     /** 
  5.      * 需要訪問的url 
  6.      */  
  7.     urls: [  
  8.       'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',  
  9.       'https://www.csdn.net/api/articles?type=new&category=arch',  
  10.       'https://www.csdn.net/api/articles?type=new&category=ai',  
  11.       'https://www.csdn.net/api/articles?type=new&category=newarticles'  
  12.     ],  
  13.     /** 
  14.      * 當前訪問的url索引 
  15.      */  
  16.     currentUrlIndex: 0,  
  17.     /** 
  18.      * 獲取到的文章 
  19.      */  
  20.     articles: [],  
  21.     /** 
  22.      * 控制上拉到底部時是否出現 "數據加載中..." 
  23.      */  
  24.     hidden: true,  
  25.     /** 
  26.      * 數據是否正在加載中，避免數據多次加載 
  27.      */  
  28.     loadingData: false  
  29.   },  
  30.   
  31.   onLoad: function(options) {  
  32.     this.loadData(false);  
  33.   },  
  34.   
  35.   /** 
  36.    * 加載數據 
  37.    */  
  38.   loadData: function(tail, callback) {  
  39.     var that = this,  
  40.       urlIndex = that.data.currentUrlIndex;  
  41.     wx.request({  
  42.       url: that.data.urls[urlIndex],  
  43.       success: function(r) {  
  44.         var oldArticles = that.data.articles,  
  45.           newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;  
  46.         that.setData({  
  47.           articles: newArticles,  
  48.           currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1  
  49.         });  
  50.         if (callback) {  
  51.           callback();  
  52.         }  
  53.       },  
  54.       error: function(r) {  
  55.         console.info('error', r);  
  56.       },  
  57.       complete: function() {}  
  58.     });  
  59.   },  
  60.   
  61.   /** 
  62.    * 監聽用戶下拉動作 
  63.    */  
  64.   onPullDownRefresh: function() {  
  65.     console.info('onPullDownRefresh');  
  66.     var loadingData = this.data.loadingData,  
  67.       that = this;  
  68.     if (loadingData) {  
  69.       return;  
  70.     }  
  71.     // 顯示導航條加載動畫  
  72.     wx.showNavigationBarLoading();  
  73.     // 顯示 loading 提示框,在 ios 系統下，會導致頂部的加載的三個點看不見  
  74.     // wx.showLoading({  
  75.     //   title: '數據加載中...',  
  76.     // });  
  77.     setTimeout(function() {  
  78.       that.loadData(false, () => {  
  79.         that.setData({  
  80.           loadingData: false  
  81.         });  
  82.         wx.stopPullDownRefresh();  
  83.         // wx.hideLoading();  
  84.         wx.hideNavigationBarLoading();  
  85.         console.info('下拉數據加載完成.');  
  86.       });  
  87.     }, 1000);  
  88.   },  
  89.   
  90.   /** 
  91.    * 頁面上拉觸底事件的處理函數 
  92.    */  
  93.   onReachBottom: function() {  
  94.     console.info('onReachBottom');  
  95.     var hidden = this.data.hidden,  
  96.       loadingData = this.data.loadingData,  
  97.       that = this;  
  98.     if (hidden) {  
  99.       this.setData({  
  100.         hidden: false  
  101.       });  
  102.       console.info(this.data.hidden);  
  103.     }  
  104.     if (loadingData) {  
  105.       return;  
  106.     }  
  107.     this.setData({  
  108.       loadingData: true  
  109.     });  
  110.     // 加載數據,模擬耗時操作  
  111.   
  112.     wx.showLoading({  
  113.       title: '數據加載中...',  
  114.     });  
  115.   
  116.     setTimeout(function() {  
  117.       that.loadData(true, () => {  
  118.         that.setData({  
  119.           hidden: true,  
  120.           loadingData: false  
  121.         });  
  122.         wx.hideLoading();  
  123.       });  
  124.       console.info('上拉數據加載完成.');  
  125.     }, 1000);  
  126.   }  
  127. })  

4、配置文件 loadMore.json 的編寫

Java代碼   收藏代碼
  1. {  
  2.   "navigationBarTitleText": "上拉刷新和下拉加載更多",  
  3.   "enablePullDownRefresh": true,  
  4.   "onReachBottomDistance": 0,  
  5.   "backgroundTextStyle": "dark",  
  6.   "backgroundColor": "#c0d9ff"  
  7. }  

 

5、下拉刷新　上拉加載

data: {
    page: 1,
    limit: 10,  // 每頁數量
　dataList: [],
　datacount: [],
    bottom_show: true, // 顯示加載中
},
onLoad: function (options) {
 
　　var name= options.name;
　　// navigationBarTitleText動態取值
　　wx.setNavigationBarTitle({
　　　　title: name+ ' ' + '測試中',
　　　　success: function (res) { }
　　})
},
onShow: function () {
    this.loadData();
},
loadData: function (callback) {
    let params = {
      limit: this.data.limit * this.data.page
    };
    request.get("/.../.../...", params).then(res => {
　　if (res.data.success) {
　　　　this.setData({
　　　　dataList: res.data.data,
              datacount: res.data.count,
              bottom_show: false
　　});
if (callback) {
callback();
}
}
}).catch(err => {});
},
onPullDownRefresh: function () {
    this.setData({ page: 1 });
    this.loadData(() => {
      wx.stopPullDownRefresh();
    });
},
　　
onReachBottom: function () {
    if (this.data.datacount <= this.data.limit * this.data.page || this.data.bottom_show)
      return;
    this.setData({ bottom_show: true });
    this.setData({ page: this.data.page + 1 });
    this.loadData(() => {
      this.setData({ bottom_show: false });
    });
}

完整代碼：

微信小程序實現上拉和下拉加載更多代碼：https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序之下拉刷新，上拉加載更多 微信小程序開發之 下拉刷新，上拉加載更多 微信小程序 實現上拉加載更多 微信小程序：上拉加載更多 微信小程序實現列表下拉刷新上拉加載 微信小程序——基於scroll-view的下拉刷新，上拉加載更多組件 微信小程序頁面事件-下拉刷新，上拉加載更多 微信小程序采坑之上拉觸底加載更多和下拉刷新 微信小程序 無限加載 上拉加載更多 微信小程序之下拉刷新，上拉更多列表實現
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM