創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括臨滄網(wǎng)站建設(shè)、臨滄網(wǎng)站制作、臨滄網(wǎng)頁(yè)制作以及臨滄網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，臨滄網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到臨滄省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

小編給大家分享一下MUI進(jìn)行APP混合開(kāi)發(fā)如何實(shí)現(xiàn)下拉刷新和上拉加載，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

首先，我們的環(huán)境是使用HBuilder通過(guò)MUI開(kāi)發(fā)APP，這種混合開(kāi)發(fā)適合安卓和蘋(píng)果兩個(gè)平臺(tái)

為實(shí)現(xiàn)下拉刷新功能，大多H5框架都是通過(guò)DIV模擬下拉回彈動(dòng)畫(huà)，在低端android手機(jī)上，DIV動(dòng)畫(huà)經(jīng)常出現(xiàn)卡頓現(xiàn)象（特別是圖文列表的情況）； 通過(guò)雙webview解決這個(gè)DIV的拖動(dòng)流暢度問(wèn)題；拖動(dòng)時(shí)，拖動(dòng)的不是div，而是一個(gè)完整的webview（子webview），回彈動(dòng)畫(huà)使用原生動(dòng)畫(huà)；在iOS平臺(tái)，H5的動(dòng)畫(huà)已經(jīng)比較流暢，故依然使用H5方案。兩個(gè)平臺(tái)實(shí)現(xiàn)雖有差異，但經(jīng)過(guò)封裝，可使用一套代碼實(shí)現(xiàn)下拉刷新。

第一步: 創(chuàng)建子頁(yè)面，因?yàn)橥蟿?dòng)的其實(shí)是個(gè)子頁(yè)面的整體

mui.init({ 
	subpages:[{ 
	url:pullrefresh-subpage-url,//下拉刷新內(nèi)容頁(yè)面地址 
	id:pullrefresh-subpage-id,//內(nèi)容頁(yè)面標(biāo)志
	 styles:{ top:subpage-top-position,//內(nèi)容頁(yè)面頂部位置,需根據(jù)實(shí)際頁(yè)面布局計(jì)算，若使用標(biāo)準(zhǔn)mui導(dǎo)航，頂部默認(rèn)為48px； .....//其它參數(shù)定義 
	 } 
	}] 
});

第二步:內(nèi)容頁(yè)面需按照如下DOM結(jié)構(gòu)構(gòu)建

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--數(shù)據(jù)列表-->
    <ul class="mui-table-view mui-table-view-chevron">
      <li class="mui-table-view-cell">1</li>
    </ul>
  </div>
</div> 	

第三步:通過(guò)mui.init方法中pullRefresh參數(shù)配置下拉刷新各項(xiàng)參數(shù)

mui.init({ 
	pullRefresh : { 
		container:"#pullrefresh",//下拉刷新容器標(biāo)識(shí)，querySelector能定位的css選擇器均可，比如：id、.class等 	
		down : {
			contentdown : "下拉可以刷新",//可選，在下拉可刷新?tīng)顟B(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 
			contentover : "釋放立即刷新",//可選，在釋放可刷新?tīng)顟B(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 
			contentrefresh : "正在刷新...",//可選，正在刷新?tīng)顟B(tài)時(shí)，下拉刷新控件上顯示的標(biāo)題內(nèi)容 
			callback : fn //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來(lái)編寫(xiě)，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)；
		 } } 
});

第四步:設(shè)置執(zhí)行函數(shù)

function fn() {
	 //業(yè)務(wù)邏輯代碼，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； ...... //注意，加載完新數(shù)據(jù)后，必須執(zhí)行如下代碼，注意：若為ajax請(qǐng)求，則需將如下代碼放置在處理完ajax響應(yīng)數(shù)據(jù)之后 	
	 
	 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //這行代碼會(huì)隱藏掉 正在加載... 容器
	 
}

以上就是關(guān)于下拉刷新的MUI寫(xiě)法以及相關(guān)的function 函數(shù)，下面來(lái)看看下拉加載：

第一步，第二步 和下拉刷新的一樣

第三步:通過(guò)mui.init方法中pullRefresh參數(shù)配置下拉刷新各項(xiàng)參數(shù)

mui.init({ 
  pullRefresh : { 
    container:"#pullrefresh",//待刷新區(qū)域標(biāo)識(shí)，querySelector能定位的css選擇器均可，比如：id、.class等 
    up : { 
      contentrefresh : "正在加載...",//可選，正在加載狀態(tài)時(shí)，上拉加載控件上顯示的標(biāo)題內(nèi)容 
      contentnomore:'沒(méi)有更多數(shù)據(jù)了',//可選，請(qǐng)求完畢若沒(méi)有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容； 
      callback : fn //必選，刷新函數(shù)，根據(jù)具體業(yè)務(wù)來(lái)編寫(xiě)，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； 
    } 
  } 
});

第四步:設(shè)置執(zhí)行函數(shù)

function fn() { 
  //業(yè)務(wù)邏輯代碼，比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù)； ...... //注意，加載完新數(shù)據(jù)后，必須執(zhí)行如下代碼，true表示沒(méi)有更多數(shù)據(jù)了，
  兩個(gè)注意事項(xiàng)： //1、若為ajax請(qǐng)求，則需將如下代碼放置在處理完ajax響應(yīng)數(shù)據(jù)之后 //
  2、注意this的作用域，若存在匿名函數(shù)，需將this復(fù)制后使用
   
  var _this = this;
   
  _this.endPullupToRefresh(true|false); 
}

看完了這篇文章，相信你對(duì)“MUI進(jìn)行APP混合開(kāi)發(fā)如何實(shí)現(xiàn)下拉刷新和上拉加載”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)名稱(chēng)：MUI進(jìn)行APP混合開(kāi)發(fā)如何實(shí)現(xiàn)下拉刷新和上拉加載-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.rwnh.cn/article20/ceijjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)建站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)