從Android原生角度看移動html5開發APP(三)之上拉載入
在mui框架中上拉載入其實很簡單了,框架已經幫助我們基本實現了。
mui的上拉載入和下拉重新整理類似,都屬於pullRefresh外掛,使用過程如下:
1、頁面滾動到底,顯示“正在載入...”提示(mui框架提供)
2、執行載入業務資料邏輯(開發者提供)
3、載入完畢,隱藏"正在載入"提示(mui框架提供)
開發者只需關心業務邏輯,實現載入更多資料即可。
初始化
初始化方法類似下拉重新整理,通過mui.init方法中pullRefresh引數配置上拉載入各項引數,如下:
pullRefresh是mui框架帶有的上拉載入外掛,container對應的是document中的某一個標籤,比如:<div>,callback是業務功能函式(自定義函式)mui.init({ swipeBack: false, //禁用右滑關閉功能 pullRefresh: { container: '#pullrefresh_route', up: { contentrefresh: '正在載入...', callback: pullupRefresh, contentnomore: '沒有更多資料了', } } });
業務邏輯
function pullfresh-function() { //業務邏輯程式碼,比如通過ajax從伺服器獲取新資料; ...... //注意: //1、載入完新資料後,必須執行如下程式碼,true表示沒有更多資料了: //2、若為ajax請求,則需將如下程式碼放置在處理完ajax響應資料之後 this.endPullupToRefresh(true|false); }
nomore
Type: Boolean
是否還有更多資料;若還有更多資料,則傳入false; 否則傳入true,之後滾動條滾動到底時,將不再顯示“上拉顯示更多”的提示語,而顯示“沒有更多資料了”的提示語;
重置上拉載入
若部分業務中,有重新觸發上拉載入的需求(比如當前類別已無更多資料,但切換到另外一個類別後,應支援繼續上拉載入),此時呼叫.refresh(true)方法,可重置上拉載入控制元件,如下程式碼:
//pullup-container為在mui.init方法中配置的pullRefresh節點中的container引數;
//注意:refresh()中需傳入true
mui('#pullup-container').pullRefresh().refresh(true);
禁用上拉重新整理
在部分場景下希望禁用上拉載入,比如在列表資料過少時,不想顯示“上拉顯示更多”、“沒有更多資料”的提示語,開發者可以通過呼叫disablePullupToRefresh()方法實現類似需求,程式碼如下:
//pullup-container為在mui.init方法中配置的pullRefresh節點中的container引數;
mui('#pullup-container').pullRefresh().disablePullupToRefresh();
啟用上拉重新整理
使用disablePullupToRefresh()方法禁用上拉載入後,可通過enablePullupToRefresh()方法再次啟用上拉載入,程式碼如下:
//pullup-container為在mui.init方法中配置的pullRefresh節點中的container引數;
mui('#pullup-container').pullRefresh().enablePullupToRefresh();
相關推薦
從Android原生角度看移動html5開發APP(三)之上拉載入
在mui框架中上拉載入其實很簡單了,框架已經幫助我們基本實現了。 mui的上拉載入和下拉重新整理類似,都屬於pullRefresh外掛,使用過程如下: 1、頁面滾動到底,顯示“正在載入...”提示(mui框架提供) 2、執行載入業務資料邏輯(開發者提供) 3、載入完畢,隱藏
從Android原生角度看移動html5開發APP(二)之整體mui初始化
有幾天沒有寫用html5開發移動app的總結了,今天抽出點時間來總結一下吧。 不多說直接入主題: 1、html就是一個框架,雖然說有點想layout,但是還是有點不一樣的,具體的就是一個是標籤,一個是具體控制元件。在移動開發中html用的最多的就是塊標籤即<div&g
從Android原生角度看移動html5開發APP(一)原生與html對比
本來一直從事Android原生開發,基於一個專案需要用到html5開發,從而學習了html、html5、css、JavaScript等等知識。下面就個人從Android原生角度淺談一下html5開發移動APP。 1、對應關係: 對於html5和html來說,html5
H5移動端開發基礎(三)自定義滾動條、實戰-音悅臺
自定義滾動條、實戰-音悅臺 自定義滾動條 js封裝 transform.js tween.js scrollBar.js 音悅臺 適配 樣式 html
WEB開發者之混合開發APP(七), 預載入和自定義事件
混合開發App同h5頁面開發,完全不同之一就是預載入技術。因為不可能所有的頁面開啟時,都需要重新建立, (1) 每次重新建立頁面,耗費效能; (2)新建頁面時,如果載入耗時較長,則會出現類似白屏問題,體驗極差。 預載入和自定義事件,就可以解
vue移動音樂app開發學習(三):輪播圖組件的開發
hub out webapp width eth reat slot utc -1 本系列文章是為了記錄學習中的知識點,便於後期自己觀看。如果有需要的同學請登錄慕課網,找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。 完成後的頁面狀態以及項目結構如
Android TV開發總結(三)構建一個TV app的焦點控制及遇到的坑
uio pow enter amp 鏈接 sheet 是否 base 用戶 原文:Android TV開發總結(三)構建一個TV app的焦點控制及遇到的坑 版權聲明:我已委托“維權騎士”(rightknights.com)為我的文章進行維權
Android 開發:(三)安卓常用控制元件以及仿《微門戶》登入介面實現
一、常用控制元件: 1、文字類控制元件 TextView 負責展示文字,非編輯 EditText 可編輯文字控制元件 2、按鈕類控制元件 Button 按鈕 ImageButton 圖片按鈕 RadioButton與RadioGroup 單
從多個角度來理解協方差(covariance)
起源:協方差自然是由方差衍生而來的,方差反應的是一個變數(一維)的離散程度,到二維了,我們可以對每個維度求其離散程度,但我們還想知道更多。我們想知道兩個維度(變數)之間的關係,直觀的舉例就是身高和體重(青少年),我們採集到的資料裡面有一種固有的性質,那就是身高越高的樣本似乎總有著更大的體重,那我們如何衡量這種
Android開發筆記(三)螢幕解析度
在app編碼中經常需要獲取手機的螢幕解析度(寬*高),原來我直接上網拷貝程式碼,但在使用過程中卻發現諸多不便。 不便一:下面程式碼中的getWidth和getHeight在adt上提示deprecated已經廢棄了,實在扎眼 WindowManager wm = get
android 敏捷開發系列(三)——《環境部署》
書接上文,上次我們瞭解了敏捷開發的架構,但是利用我們普通的開發工具Eclipse的Ant構建是無法完成專案依賴等工作的,所以在開發之前我們需要準備好以下開發環境 maven + nexus + hudson + git 注:本文基本環境 服務端系統為ubuntu13.0
Android開發ViewPager和Fragment結合使用實現新聞類app( 三 )(基本成型的app)
//該類為我們的標題欄的自定義View public class MyLinearLayout extends LinearLayout { public MyLinearLayout(Context context, AttributeSet attrs) { super(cont
Android開發學習(三)
Activity和Intent主要內容1.多個Activity之間的關係2.Intent的作用3.在一個Activity中啟動另一個Activity的方法4.使用Intent在Activity之間傳送資料的基本方法1.多個Activity之間的關係2.Intent的作用一個I
H5移動端開發基礎(四)多指操作、案例-相簿
多指操作、案例-相簿 多指操作 旋轉 縮放 實現安卓多指事件 案例-相簿 多指操作 // gesturestart:手指觸碰元素,螢幕上有兩個或兩個以上的手指 oBox.addEventListener
H5移動端開發基礎(二)適配、3D、animation
適配、3D、animation 適配 rem適配 getBoundingClientRect viewport適配 橫豎屏適配 方法一 方法二 3D
H5移動端開發基礎(一)事件基礎
事件基礎 移動端基礎事件 滑屏原理 transform 與 transition 無縫滑屏自動播放幻燈片 移動端基礎事件 手指按下:touchstart <==> mousedown 手指擡起:touchend <
微信小程式從零開始開發步驟(三)底部導航欄
上一章節,我們分享瞭如何建立一個新的頁面和設定頁面的標題,這一章我們來聊聊底部導航欄是如何實現的。即點選底部的導航,會實現不同對應頁面之間的切換。 我們先來看個我們要實現的底部導航欄的效果圖:(三個導航圖示示例,微信小程式最多能加5個) 1. 圖標準備
Xamarin 跨移動端開發系列(01) -- 搭建環境、編譯、除錯、部署、執行
(本文是基於老版本的VS和Xamarin,而VS2017已經集成了Xamarin,所以,本文已經過時,最新的Xamarin開發介紹請參見 使用 Xamarin開發手機聊天程式 。) 如果是.NET開發人員,想學習手機應用開發(Android和iOS),Xamarin 無疑是最好的選擇,編寫一次,
Android自定義控制元件開發系列(三)——仿支付寶六位支付密碼輸入頁面
在移動互聯領域,有那麼幾家龍頭一直是我等學習和追求的目標,比如支付寶、微信、餓了麼、酷狗音樂等等,大神舉不勝舉,他們設計的介面、互動方式已經培養了中國(有可能會是世界)民眾的操作習慣:舉個小例子,對話方塊“確定”按鈕的左右位置就很有學問,如果大家都是左邊取消
android開發教程(三)——環境搭建之android-sdk
目錄 android sdk包括開發android app所需要的編譯、除錯、測試開發工具和API庫。 下載android sdk: 在這個下載頁中提供兩種下載方式: 集成了adt的ide和android sdk的包,即包含了android sdk、adt、eclips