mui 底部webview 返回是白屏且mui.back()无效果

分类：MUI

白屏 Webview 跨webview

项目中使用了mui底部webview，共三个选项卡，第一个选项卡与第三个选项卡，点击手机的返回键都会提示双击退出应用。
可是当切换到第二个选项卡时，直接白屏，再返回一下就直接退回首页，也无任何提供。mui.back()也无用。

以下是代码
<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>ENT智慧控电</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link rel="stylesheet" href="css/mui.min.css">  
    <link href="css/style.css" rel="stylesheet" />  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  
    </style>  
</head>  

<body>  
    <!--设置class融合菜单与背景的颜色-->  
    <header class="mui-bar mui-bar-nav" id="header" style="height: 70px;padding-top:25px;">  
        <a class="mui-pull-left">  
            <img style="margin-top: 10px;" src="img/blue/blue-logo.png" height="25" /></a>  
        <h1 id="title" class="mui-title class-title">ENT智慧控电</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="main.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">首页</span>  
        </a>  
        <!--<a class="mui-tab-item" href="view/person/personInfo.html">  
            <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>  
            <span class="mui-tab-label">最新通知</span>  
        </a>-->  
        <a class="mui-tab-item" href="view/recharge/rechargerecord.html">  
            <span class="mui-icon mui-icon-list"></span>  
            <span class="mui-tab-label">缴费记录</span>  
        </a>  
        <a class="mui-tab-item" href="view/person/personInfo.html">  
            <span class="mui-icon mui-icon-contact"></span>  
            <span class="mui-tab-label">我的</span>  
        </a>  
    </nav>  
    <script src="js/mui.min.js"></script>  
    <script src="js/jquery-3.3.1.min.js"></script>  
    <script src="js/api-request.js"></script>  
    <script src="js/xinxun.common.js"></script>  
    <script src="js/userinfo.js"></script>  
    <script src="js/updateVersion.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        //mui初始化  
        mui.init({  
            swipeBack: false,  
            beforeback: back  
        });  

        function back() {  
            return true;  
        }  
        var subpages = ['main.html', 'view/recharge/rechargerecord.html', 'view/person/personInfo.html'];  
        var subpage_style = {  
            top: '70px',  
            bottom: '51px',  
            render: 'always',  
            titlecolor: '#000000'  
        };  

        var aniShow = {};  
        //创建子页面，首个选项卡页面显示，其它均隐藏；  
        mui.plusReady(function() {  
            var self = plus.webview.currentWebview();  
            for(var i = 0; i < 3; i++) {  
                var temp = {};  
                //var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                if(i > 0) {  
                    sub.hide();  
                } else {  
                    temp[subpages[i]] = "true";  
                    mui.extend(aniShow, temp);  
                }  
                self.append(sub);  
            }  
        });  
        //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
        //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if(targetTab == activeTab) {  
                return;  
            }  
            if(this.querySelector('.mui-tab-label').innerHTML == "我的") {  
                title.innerHTML = "个人中心";  
            } else if(this.querySelector('.mui-tab-label').innerHTML == "首页") {  
                title.innerHTML = "ENT智慧控电";  
            } else {  
                //更换标题  
                title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
            }  
            console.log(1);  
            //显示目标选项卡  
            //若为iOS平台或非首次显示，则直接显示  
            if(mui.os.ios || aniShow[targetTab]) {  
                plus.webview.show(targetTab);  
            } else {  
                console.log(2);  
                //否则，使用fade-in动画，且保存变量  
                var temp = {};  
                temp[targetTab] = "true";  
                mui.extend(aniShow, temp);  
                plus.webview.show(targetTab, "fade-in", 300);  
            }  
            //隐藏当前;  
            plus.webview.hide(activeTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
        //自定义事件，模拟点击“首页选项卡”  
        document.addEventListener('gohome', function() {  
            var defaultTab = document.getElementById("defaultTab");  
            //模拟首页点击  
            mui.trigger(defaultTab, 'tap');  
            //切换选项卡高亮  
            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
            if(defaultTab !== current) {  
                current.classList.remove('mui-active');  
                defaultTab.classList.add('mui-active');  
            }  
        });  
    </script>  
</body>

</html>

缴费页面：
<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title>充值记录</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../../css/mui.min.css" rel="stylesheet" />  
    <link href="../../css/muicommom.css" rel="stylesheet" />  
    <link href="../../css/style.css" rel="stylesheet" />  
    <script src="../../js/common.js"></script>  
    <style type="text/css">  
        .mui-media {  
            font-size: 14px;  
        }  

        .mui-table-view .mui-media-object {  
            max-width: initial;  
            width: 90px;  
            height: 70px;  
        }  

        .meta-info {  
            position: absolute;  
            left: 115px;  
            right: 15px;  
            top: 8px;  
            color: #8f8f94;  
        }  

        .meta-info .author,  
        .meta-info .time {  
            display: inline-block;  
        }  

        .meta-info .time {  
            float: right;  
        }  

        .mui-table-view:before,  
        .mui-table-view:after {  
            height: 0;  
        }  

        .mui-content>.mui-table-view:first-child {  
            margin-top: 1px;  
        }  

        .title {  
            font-size: 14px;  
            height: 40px;  
            background: white;  
            padding-left: 20px;  
            padding-top: 0.9em;  
        }  
    </style>  
</head>  

<body>  
    <div class="mui-content" id="maisssn">  
        <div id="list" class="mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <div v-for="item in recordData">  
                    <div class="title">{{item.key.year}}年{{item.key.month}}月 充值金额 ￥{{getMonthToalAmount(item)}}</div>  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell mui-media" v-for="subitem in item.value">  
                            <img class="mui-media-object mui-pull-left" style="width: 30px;height: 30px;" src="../../img/blue/blue-chzhjilu.png">  
                            <div class="mui-media-body">  
                                <div class="mui-ellipsis-2">充值-{{subitem.userName||subitem.phone}}-{{subitem.meterId}}</div>  
                                <div class="author">{{subitem.fishTime}}</div>  
                            </div>  
                            <div class="meta-info">  
                                <div class="time">+{{subitem.amount}}</div>  
                            </div>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
    </div>  
    <script src="../../js/api-request.js" type="text/javascript" charset="utf-8"></script>  
    <script src="../../js/userinfo.js"></script>  
    <script src="../../js/mui.min.js"></script>  
    <script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>  
    <script type="text/javascript">  
        var lastId = '',  
            minId = ''; //最新的id   
        var pageIndex = 0,  
            pageSize = 10; //最新的id   
        mui.plusReady(function() {      
            var first = null;         
            mui.back = function() {        
                if(!first) {  
                    first = new Date().getTime();             
                    mui.toast('再按一次退出应用');             
                    setTimeout(function() {               
                        first = null;             
                    }, 2000);           
                } else {             
                    if(new Date().getTime() - first < 2000) {               
                        plus.runtime.quit();             
                    }           
                }         
            };    
        });  
        mui.init({

// keyEventBind: {
// backbutton: false, //Boolean(默认true)关闭back按键监听
// menubutton: true //Boolean(默认true)关闭menu按键监听
// },
pullRefresh: {
container: '#list',
down: {
style: 'circle',
offset: '0px',
auto: true,
callback: pulldownRefresh
},
up: {
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: false, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: pullupRefresh
}
}
});
/**

下拉刷新获取最新列表
*/
function pulldownRefresh() {
if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
plus.nativeUI.toast('似乎已断开与互联网的连接', {
verticalAlign: 'top'
});
return;
}

        mui.ajax(ApiRequest.getApiHost() + '/Payment/get?pageIndex=0&pageSize=' + pageSize + '&userId=' + UserInfo.getUserState().userId, {  
            type: 'GET',  
            dataType: 'json', //服务器返回json格式数据  
            timeout: 5000,  
            success: function(res) {  
                if(res.success) {  
                    if(res.data && res.data.length > 0) {  
                        pageIndex = 1;  
                        lastId = res.data[0]["value"][0].payId; //保存最新消息的id，方便下拉刷新时使用  
                        if(!minId) { //首次拉取列表时保存最后一条消息的id，方便上拉加载时使用  
                            minId = res.data[res.data.length - 1]["value"][res.data[res.data.length - 1]["value"].length - 1].payId;  
                        }  
                        //vm.recordData=res.data.concat(vm.recordData);//t.recordData.concat();  
                        vm.recordData = res.data; //t.recordData.concat();  

                    } else {  
                        mui.toast('没有数据!');  
                    }  
                } else {  
                    mui.toast('数据加载失败!');  
                }  
                mui('#list').pullRefresh().endPulldownToRefresh();  
                //mui('#list').pullRefresh().disablePullupToRefresh();   
            },  
            error: function(xhr, type, errorThrown) {  
                mui.toast('数据加载失败!');  
                mui('#list').pullRefresh().endPulldownToRefresh();  
            }  

        });  

    };  
    /**

上拉加载拉取历史列表
*/
function pullupRefresh() {
mui.ajax(ApiRequest.getApiHost() + '/Payment/get?pageIndex=' + pageIndex + '&pageSize=' + pageSize + '&userId=' + UserInfo.getUserState().userId, {
type: 'GET',
dataType: 'json', //服务器返回json格式数据
timeout: 5000,
success: function(res) {
if(res.success) {
if(res.data && res.data.length > 0) {
pageIndex++;
vm.recordData = vm.recordData.concat(res.data); //t.recordData.concat();
vm.recordData = Array.from(new Set(vm.recordData));
} else
mui.toast('没有更多数据!');
} else {
mui.toast('数据加载失败!');
}
mui('#list').pullRefresh().endPullupToRefresh();
},
error: function(xhr, type, errorThrown) {
mui.toast('数据加载失败!');
mui('#list').pullRefresh().endPullupToRefresh();
}
});
```
    };  
    var vm = new Vue({  
        el: '#maisssn',  
        data: {  
            recordData: []  
        },  
        methods: {  
            getMonthToalAmount: function(list) {  
                var total = 0;  
                list.value.filter  
                list.value.filter(function(x) {  
                    total += x.amount;  
                });  
                return total.toFixed(2);  
            }  
        },  
    });  
</script>  
```
</body>

</html>

// keyEventBind: {
// backbutton: false, //Boolean(默认true)关闭back按键监听
// menubutton: true //Boolean(默认true)关闭menu按键监听
// },

加上这个配置不会白屏，但是不会提醒双击退出，直接是返回登录页。加了mui.back也无用。

求大神指导。

2019-06-17 00:12 负责人:无分享

0 个回复

该问题目前已经被锁定, 无法添加新回复

mui 底部webview 返回是白屏且mui.back()无效果

0 个回复

公告

相关问题

mui 底部webview 返回是白屏且mui.back()无效果

与内容相关的链接

0 个回复

公告

相关问题