推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

查看: 816|回復: 0
打印 上一主題 下一主題

[小程序教程] 微信小程序教程(18) : 微信小程序之上拉加載和下拉刷新

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2018-4-21 16:33:00 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

在微信小程序上實現下拉刷新、上拉加載的效果



使用系統提供的onPullDownRefresh、onReachBottom這2個事件,

前提需要在app.json或page.json配置文件中設置,才能使用。

app.json是全應用的頁面都可以使用該事件,page.json則只是對應的頁面才可以使用。


屬性

類型

默認值

描述

enablePullDownRefresh

Boolean

false

是否開啟下拉刷新。



示例:

app.json:

在app.json文件里設置window屬性

[html] view plain copy


  • {  
  •   "window":{  
  • "enablePullDownRefresh": true  
  •   }  
  • }  




page.json:

在page.json文件里直接設置屬性


[html] view plain copy


  • {  
  •     "enablePullDownRefresh": true  
  • }  




示例:

可以結合導航欄loading顯示正在加載的效果

[html] view plain copy


  • Page({  
  •   data: {  
  •     pageNum: 1,       // 設置加載的第幾次,默認是第一次  
  •     isFirstLoad: true,   // 用于判斷List數組是不是空數組,默認true,空的數組  
  •     hasMore: false,    // “加載更多”  
  •   },  
  •   // 下拉刷新  
  •   onPullDownRefresh: function () {  
  •     // 顯示導航欄loading  
  •     wx.showNavigationBarLoading();  
  •     // 調用接口加載數據  
  •     this.loadData();  
  •     // 隱藏導航欄loading  
  •     wx.hideNavigationBarLoading();  
  •     // 當處理完數據刷新后,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新  
  •     wx.stopPullDownRefresh();  
  •   },  
  •   // 上拉加載  
  •   onReachBottom(e) {  
  •     let that = this;  
  •     if (that.data.hasMore) {  
  •       that.setData({  
  •         pageNum: that.data.pageNum + 1,  // 每次觸發上拉事件,把pageNum+1  
  •         isFirstLoad: false                // 觸發到上拉事件,把isFirstLoad設為為false  
  •       });  
  •   
  •       that.loadData();  
  •     }  
  •   },  
  • })  



本版積分規則

關閉

推56站長論壇推薦上一條 /1 下一條

站長QQ
在線咨詢
咨詢熱線
QQ:405327411
站長

QQ|廣告合作|關于我們|聯系我們|免責聲明|網站導航|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

王寶臣旗下網站 推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表
3分赛车计划软件 填大坑怎么玩能赢钱 竞彩比分如何投注 1分快三精准计划网 十一选五怎么玩不输 辽宁35选7预测 北京快乐8 湖南牌的玩法 百胜国际棋牌 快乐十分历史开 排列三组3组6什么意思 闲来广东麻将作弊方法 在线开户股票安全吗