在APP制作過(guò)程中,下拉刷新和上拉加載時(shí)一直配合使用的一對(duì)功能,在之前我們給大家分享過(guò)用JS相關(guān)的上拉加載和下來(lái)刷新,有興趣的朋友可以參考:MUI進(jìn)行APP混合開發(fā)實(shí)現(xiàn)下拉刷新和上拉加載
我們先看開下如何在MUI中使用整合的上拉下拉
第一步,第二步和下拉刷新一樣
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ù)定義 } }] });第三步:在mui.init()內(nèi)同時(shí)設(shè)置上拉加載和下拉刷新
mui.init({ pullRefresh: { container: '#pullrefresh', down: { contentdown : "下拉可以刷新",//可選,在下拉可刷新狀態(tài)時(shí),下拉刷新控件上顯示的標(biāo)題內(nèi)容 contentover : "釋放立即刷新",//可選,在釋放可刷新狀態(tài)時(shí),下拉刷新控件上顯示的標(biāo)題內(nèi)容 contentrefresh : "正在刷新...",//可選,正在刷新狀態(tài)時(shí),下拉刷新控件上顯示的標(biāo)題內(nèi)容 callback: downFn // 下拉執(zhí)行函數(shù) }, up: { contentrefresh: '正在加載...', callback: upFn // 上拉執(zhí)行函數(shù) } }});注意: 給獲取元素加onclick點(diǎn)擊事件不行,需要加addEventListener自定義事件
如果大家對(duì)這個(gè)整合有所不理解,可以先學(xué)習(xí)一下把上拉加載和下拉刷新分開的情況,情閱讀:
新聞熱點(diǎn)
疑難解答
圖片精選