MUI back返回父頁(yè)面，同時(shí)刷新父頁(yè)面

Travis 發(fā)布于2019-08-21 11:42 / 1800人閱讀

開(kāi)始用mui移動(dòng)端項(xiàng)目，最常遇到的問(wèn)題就是刷新頁(yè)面，最常見(jiàn)的一種就是下拉刷新，按照官網(wǎng)上的來(lái)，可以輕松解決；另外一種常見(jiàn)的就是從子頁(yè)面回到父頁(yè)面的刷新，
在子頁(yè)面，注冊(cè)beforeback參數(shù)+自定義事件：

mui.init({
    beforeback: function(){
        //獲得列表界面的webview
         //var list = plus.webview.currentWebview().opener();
         //目標(biāo)頁(yè)面
         var list = plus.webview.getWebviewById("FollowUpHisList");  
         //觸發(fā)列表界面的自定義事件（refresh）,從而進(jìn)行數(shù)據(jù)刷新  
         mui.fire(list, "refresh");  
        //返回true，繼續(xù)頁(yè)面關(guān)閉邏輯
        return true;
    }
});

beforeback的執(zhí)行返回必須是同步的，當(dāng)然也可以自定義業(yè)務(wù)邏輯，復(fù)寫(xiě)mui.back

var old_back = mui.back;
mui.back = function(){
  var btn = ["確定","取消"];
  mui.confirm("確認(rèn)關(guān)閉當(dāng)前窗口？","Hello MUI",btn,function(e){
    if(e.index==0){
        //執(zhí)行mui封裝好的窗口關(guān)閉邏輯；
        old_back();
    }
  });
}

而父頁(yè)面，則需要添加監(jiān)聽(tīng)事件，通過(guò)reload刷新整個(gè)頁(yè)面：

window.addEventListener("refresh", function(e) {
//在父頁(yè)面中添加監(jiān)聽(tīng)事件，刷新頁(yè)面
    location.reload();  
});

在實(shí)際應(yīng)用中，如果父頁(yè)面只是單純的列表頁(yè)，那么reload()刷新也是可以的，但如果頁(yè)面中有其他的請(qǐng)求，這時(shí)候reload()刷新整個(gè)頁(yè)面就顯得有些多余，這個(gè)時(shí)候?yàn)楹尾粏螁沃凰⑿轮付ǖ姆椒兀?/p>

window.addEventListener("refresh", function(e) {  
    document.getElementById("infoList0").innerHTML = "";
    //清空列表內(nèi)容
    initCloumnData();//重新加載要刷新的方法
});

當(dāng)然，這種在子頁(yè)面添加自定義事件，父頁(yè)面添加監(jiān)聽(tīng)的方法也可以用于方法請(qǐng)求成功后，自動(dòng)跳轉(zhuǎn)到目標(biāo)頁(yè)面并刷新，在實(shí)際中也是很實(shí)用的，尤其是添加，編輯信息成功后，自動(dòng)返回并刷新頁(yè)面。
高手請(qǐng)多指點(diǎn)，新手可以借鑒。

GPU云服務(wù)器云服務(wù)器 html返回父級(jí)頁(yè)面父頁(yè)面 html退回父頁(yè)面 iframe調(diào)用父頁(yè)面js

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87000.html

相關(guān)文章

MUI框架開(kāi)發(fā)HTML5手機(jī)APP(二)--頁(yè)面跳轉(zhuǎn)傳值&底部選項(xiàng)卡切換

摘要：三底部選項(xiàng)卡切換頁(yè)面底部選項(xiàng)卡的切換，可以說(shuō)是的標(biāo)志之一。兩種模式的顯示效果差不多，如下圖可見(jiàn)兩種模式的區(qū)別顧名思義，模式是將所有子頁(yè)面的內(nèi)容，分別放置到主頁(yè)不同的中，當(dāng)我們點(diǎn)擊主頁(yè)的不同選項(xiàng)卡時(shí)，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學(xué)習(xí)了如何使用Hbuilder創(chuàng)建一個(gè)APP，同時(shí)如何使用MUI搭建屬于自己的第一款A(yù)PP，沒(méi)有學(xué)習(xí)的同學(xué)可以戳鏈接學(xué)習(xí)： http...

番茄西紅柿 2019-04-23 13:37 評(píng)論0 收藏0
記微信網(wǎng)頁(yè)開(kāi)發(fā)單頁(yè)面返回不刷新的實(shí)現(xiàn)

摘要：使用語(yǔ)法與要跳轉(zhuǎn)到的對(duì)應(yīng)的狀態(tài)信息。頁(yè)面名字，方便調(diào)試。要跳轉(zhuǎn)到的地址，不能跨域，對(duì)于單頁(yè)應(yīng)用來(lái)說(shuō)沒(méi)用，傳空即可。需求在微信網(wǎng)頁(yè)開(kāi)發(fā)中,點(diǎn)擊返回按鈕不刷新頁(yè)面,進(jìn)行頁(yè)面切換,且實(shí)現(xiàn)傳值功能. 問(wèn)題由來(lái) 在做微信網(wǎng)頁(yè)開(kāi)發(fā)時(shí),由于微信的左上角返回按鈕會(huì)返回上一個(gè)頁(yè)面并且刷新,無(wú)法做成打開(kāi)頁(yè)面選擇內(nèi)容后關(guān)閉當(dāng)前頁(yè)面,并且給前一個(gè)頁(yè)面?zhèn)髦档墓δ? 實(shí)現(xiàn)方法想實(shí)現(xiàn)此功能一開(kāi)始想到的是不進(jìn)行...

cuieney 2019-08-22 15:39 評(píng)論0 收藏0
MUI使用總結(jié)

摘要：預(yù)加載自定義事件第三方擴(kuò)展插件涉及的，除了，其它所有手機(jī)瀏覽器及瀏覽器均無(wú)法使用，目前主要包括語(yǔ)音輸入事件相關(guān)注意瀏覽器沒(méi)有事件事件相關(guān)的，手機(jī)端瀏覽器均可使用端模擬手機(jī)瀏覽器也可以正常使用。最近項(xiàng)目中需要使用MUI做一個(gè)視頻播放的小功能。我就花時(shí)間研究了一下MUI。 MUI是一個(gè)使用JavaScript開(kāi)發(fā)Android和IOS應(yīng)用的前端框架。這篇文章將以知識(shí)樹(shù)的形式對(duì)MUI的使用...

elliott_hu 2019-08-23 14:48 評(píng)論0 收藏0
VUE實(shí)例圖解

摘要：案例品牌列表構(gòu)建基本結(jié)構(gòu)利用的樣式數(shù)據(jù)要雙向更新，所以要用到，同時(shí)在后面的中要進(jìn)行初始化為添加按鈕綁定事件的中，綁定值為關(guān)鍵字刪除標(biāo)簽綁定函數(shù)，傳入?yún)?shù)的時(shí)候，需要用括號(hào)事件修飾符，表示阻止默認(rèn)事件實(shí)例對(duì)象新建一個(gè)實(shí)例函數(shù)中初始化需要雙向 VUE案例品牌列表構(gòu)建基本結(jié)構(gòu) 利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 評(píng)論0 收藏0
mui實(shí)現(xiàn)底部凸起按鈕的實(shí)現(xiàn)

摘要：最近在看其他的時(shí)候，突然想到了在中自己實(shí)現(xiàn)一個(gè)底部凸起按鈕的效果。來(lái)實(shí)現(xiàn)底部切換始終處于上層的效果。最后附上本人的圓形按鈕代碼和實(shí)現(xiàn)效果圖。最近在看其他app的時(shí)候，突然想到了在mui中自己實(shí)現(xiàn)一個(gè)底部凸起按鈕的效果。大致想要實(shí)現(xiàn)的樣子如圖（來(lái)自閑魚(yú)app的主界面）：showImg(https://segmentfault.com/img/bVHqdd?w=276&h=122); 話...

DevTalking 2019-08-21 11:24 評(píng)論0 收藏0