MUI页面及遇到的bug

最新推荐文章于 2022-02-23 16:56:03 发布

未编辑

最新推荐文章于 2022-02-23 16:56:03 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lyw19930812/article/details/81282822

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

登陆页面模板

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/mui.picker.css" rel="stylesheet" />
        <link href="css/mui.poppicker.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/mui.picker.js"></script>
        <script src="js/mui.poppicker.js"></script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
            }
            #background-color: rgba(144, 144, 144, 0.1);
        </style>
    </head>

    <body style="background-color:#ffffff">
        <header style="background-color: #ffffff;" class="mui-bar mui-bar-nav">
            <div style="color: #83838e;" class="mui-title">
                用户登录
            </div>
        </header>
        <div style="background-color: #ffffff;height: 100%;" class="mui-content">
            <div style="text-align: center;margin-top:40px;margin-bottom: 20px;">
                <img src="images/logo.png" style="border:0;width:200px;height:135px;" />
            </div>
            <div style="font-size: 21px;color:#83838e;width: 100%;height: 40px;text-align: center;">
                锦上智电网平台
            </div>
            <div style="margin-top: 10px;">
                <form id='login-form' style="border-radius: 10px; overflow: hidden;border: 1px solid #fff;width: 95%;margin: 0 auto;" class="mui-input-group">
                    <div class="mui-input-row" style="padding-top:8px;height: 53px;">
                        <label style="width:20%;padding-left: 20px;"><span style="margin-top: -8px;" class="mui-icon mui-icon-person"></span></label>
                        <input style="width:80%" id='username' type="text" class="mui-input-clear mui-input" placeholder="请输入用户名" />
                    </div>
                    <div class="mui-input-row" style="margin-top:8px;height: 50px;">
                        <label style="width:20%;padding-left: 20px;"><span style="margin-top: -8px;" class="mui-icon mui-icon-locked"></span></label>
                        <input style="width:80%" id="password" type="password" class="mui-input-password mui-input" placeholder="请输入密码" />
                    </div>
                </form>
            </div>
            <div style="color:#83838e;text-indent: 18px;margin-top: 15px;margin-bottom: 25px;margin-left: 5px;">
                <input type="checkbox" name="checkbox" id="checkbox-id" value="" /> 记住密码
            </div>
            <div class="mui-content-padded" style="text-align: center;">
                <button id='login' style="background-color: rgba(0, 122, 255, 0.8);" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
                <div class="link-area">
                    <a id='showUserPicker'>选择账号</a> <span class="spliter">|</span>
                    <a id='forgetPassword'>忘记密码</a>
                </div>
            </div>
        </div>
        <script>
            (function($, doc) {
                $.init();
                $.ready(function() {
                    /**
                     * 获取对象属性的值
                     * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
                     * @param {Object} obj 对象
                     * @param {String} param 属性名
                     */
                    var _getParam = function(obj, param) {
                        return obj[param] || '';
                    };
                    //普通示例
                    var users = [{
                        value: '111111',
                        text: 'sa',
                        checked: true
                    }, {
                        value: '111111',
                        text: 'sa1',
                        checked: true
                    }];
                    var userPicker = new $.PopPicker();
                    userPicker.setData(users);
                    var showUserPickerButton = doc.getElementById('showUserPicker');
                    var username = doc.getElementById('username');
                    var password = doc.getElementById('password');
                    var checkboxId = doc.getElementById('checkbox-id');
                    showUserPickerButton.addEventListener('tap', function(event) {
                        userPicker.show(function(items) {
                            if(items[0].text != undefined) {
                                username.value = items[0].text;
                                password.value = "";
                                checkboxId.checked = items[0].checked;
                                if(items[0].checked) {
                                    password.value = items[0].value;
                                }
                                //返回 false 可以阻止选择框的关闭
                                //return false;
                            }
                        });
                    }, false);
                });
                //登陆跳转
                doc.getElementById('login').addEventListener('click', function(event) {
                    var username = doc.getElementById('username');
                    var password = doc.getElementById('password');
                    if(!username.value || username.value.trim() == "" || !password.value || password.value.trim() == "") {
                        mui.toast("用户名或密码格式不正确");
                        return false;
                    }
                    if(username.value=="sa"){
                        window.localStorage.setItem("type","admin");
                    }else{
                        window.localStorage.setItem("type","user");
                    }
                    mui.openWindow({
                        url: 'homePage.html',
                        extras: {
                        }
                    });
                });
                //忘记密码
                doc.getElementById('forgetPassword').addEventListener('click', function(event) {
                    mui.openWindow({
                        url: 'forget_password.html',
                        extras: {}
                    });
                });
                //单击登陆
                /*doc.getElementById('login').addEventListener('click',function(event){
                    var users1 = JSON.parse(localStorage.getItem("users"));
                    if(users1 == undefined || !users1.length>0){
                        users1 = new Array();
                    }
                    var user = {};
                    user.text = doc.getElementById('username').value;
                    user.value = doc.getElementById('password').value;
                    user.value = doc.getElementById('checkbox-id').checked;
                    users1.push(user);
                    var obj = {};
                    users1 = users1.reduce(function(item, next) {
                        obj[next.key] ? '' : obj[next.key] = true && item.push(next);
                        return item;
                    }, []);
                    window.localStorage.setItem("users",JSON.stringify(users1));
                });*/
            })(mui, document);
        </script>
    </body>

</html>

登陆页面预览
功能页面预览

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/mui.picker.min.css" />
        <script src="js/mui.min.js"></script>
        <script src="js/mui.picker.min.js"></script>
        <script src="libs/echarts-all.js"></script>
        <style>
            .table {
                border: 1px solid #BBBBBB;
                color: #666;
            }
            .table th {
                height: 40px;
            }
            .table tr {
                height: 30px;
            }
            .table td,
            .table th {
                padding-left: 10px;
                border: 1px solid #BBBBBB;
                text-align: center;
            }
            .table tr.alter {
                background-color: #BBBBBB;
            }
            .chart {
                height: 200px;
                margin: 0px;
                padding: 0px;
            }
            h5 {
                margin-top: 30px;
                font-weight: bold;
            }
            h5:first-child {
                margin-top: 15px;
            }
            .ui-content>.mui-table-view:first-child {
                margin-top: -1px;
            }
    </style>
    </head>
    <body>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li style="background-color:#558cf3;color: white;font-family: cursive;font-size: 20px;" class="mui-table-view-cell">
                        A站点能效分析
                    </li>
                    <li class="mui-table-view-cell mui-collapse mui-active">
                        <a class="mui-navigate-right">A站点</a>
                        <div class="mui-collapse-content">
                            <form class="mui-input-group">
                                <div class="mui-input-row mui-checkbox mui-right">
                                    <label style="padding-left: 30px;">分项电量1</label>
                                    <input name="checkbox" value="Item 1" type="checkbox" >
                                </div>
                                <div class="mui-input-row mui-checkbox mui-right">
                                    <label style="padding-left: 30px;">分项电量2</label>
                                    <input name="checkbox" value="Item 2" type="checkbox">
                                </div>
                                <div class="mui-input-row mui-checkbox mui-right">
                                    <label style="padding-left: 30px;">分项电量3</label>
                                    <input name="checkbox" value="Item 3" type="checkbox" >
                                </div>
                            </form>     
                        </div>
                    </li>
                    <li style="height: 50px;">
                        <div class="mui-center" style="margin-top: 5px;">
                            <div style="height:50px;float:left;width:48%;" class="mui-input-row mui-select">
                               <label style="text-align:center;width:68%;">查询类型：</label>
                               <select style="width:32%;padding-left:5px;background-color:#9ebef9;" id="dataselect" onchange="showData()">
                                    <option value="day" selected="selected">日</option>
                                    <option value="month">月</option>
                                </select>
                            </div>
                            <div style="float:left;width: 35%;margin-left: 5px;">
                                <div id="datatimeDay" style="display:block;">
                                    <button id='dayTime' style="padding:0px;height: 40px;" data-options='{"type":"date","beginYear":1999,"endYear":2050}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
                                </div>
                                <div id="datatimeMonth" style="display: none;">
                                    <button id='monthTime' style="padding:0px;height: 40px;" data-options='{"type":"month","beginYear":1999,"endYear":2050}' class="btn mui-btn mui-btn-block">选择月份 ...</button>
                                </div>
                            </div>
                            <div style="float:left;width:15%;padding-left:5px;"><button style="height: 40px;" class="mui-btn">查询</button></div>
                        </div>
                    </li>
                    <li>
                        <div class="mui-center">
                            <table class="table" width="100%">
                                <thead><th>时段</th><th>用电量KW-h</th><th>占比%</th><th>单价(元)</th><th>费用(元)</th></thead>
                                <tr><td>尖</td><td>333</td><td>11.5</td><td>1.32</td><td>439.6</td></tr>
                                <tr><td>峰</td><td>333</td><td>11.5</td><td>1.32</td><td>439.6</td></tr>
                                <tr><td>平</td><td>333</td><td>11.5</td><td>1.32</td><td>439.6</td></tr>
                                <tr><td>谷</td><td>333</td><td>11.5</td><td>1.32</td><td>439.6</td></tr>
                                <tr><td>总</td><td>333</td><td>11.5</td><td>—</td><td>439.6</td></tr>
                            </table>
                        </div>
                    </li>
                    <li>
                        <div style="padding-top: 10px;width: 100%;">
                            <label style="padding-left:10px;">当日电量占比：</label>
                            <div class="chart" id="pieChart1"></div>
                        </div>
                        <div style="width: 100%;">
                            <label style="padding-left:10px;">当日电量费用占比：</label>
                            <div class="chart" id="pieChart2"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <script>
            //mui('.mui-scroll-wrapper').scroll();//与下拉刷新冲突
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        style:'circle',
                        color:'#2BD009',
                        callback: test
                    },
                    up: {
                        auto:false
                    }
                }
            });
            function test(){
                mui.toast("刷新成功");
                mui('#pullrefresh').pullRefresh().endPulldown();
            }
            function showData(){
                if(document.getElementById("dataselect").value==='day'){
                    document.getElementById("datatimeDay").style.display="block";
                    document.getElementById("datatimeMonth").style.display="none";
                }else{
                    document.getElementById("datatimeDay").style.display="none";
                    document.getElementById("datatimeMonth").style.display="block";
                }
            }
            (function($) {
                $.init();
                var result = $('#dayTime')[0];
                var month = $('#monthTime')[0];
                var btns = $('.btn');
                btns.each(function(i, btn) {
                    btn.addEventListener('tap', function() {
                        var _self = this;
                        if(_self.picker) {
                            _self.picker.show(function (rs) {
                                result.innerText = rs.text;
                                _self.picker.dispose();
                                _self.picker = null;
                            });
                        } else {
                            var optionsJson = this.getAttribute('data-options') || '{}';
                            var options = JSON.parse(optionsJson);
                            var id = this.getAttribute('id');
                            /*
                             * 首次显示时实例化组件
                             * 示例为了简洁，将 options 放在了按钮的 dom 上
                             * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                             */
                            _self.picker = new $.DtPicker(options);
                            _self.picker.show(function(rs) {
                                /*
                                 * rs.value 拼合后的 value
                                 * rs.text 拼合后的 text
                                 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                                 * rs.m 月，用法同年
                                 * rs.d 日，用法同年
                                 * rs.h 时，用法同年
                                 * rs.i 分（minutes 的第二个字母），用法同年
                                 */
                                if(id == "dayTime"){
                                    result.innerText = rs.text;
                                    month.innerText = "选择月份 ...";
                                }else if(id == "monthTime"){
                                    month.innerText = rs.text;
                                    result.innerText = "选择日期 ...";
                                };
                                /* 
                                 * 返回 false 可以阻止选择框的关闭
                                 * return false;
                                 */
                                /*
                                 * 释放组件资源，释放后将将不能再操作组件
                                 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                                 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                                 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                                 */
                                _self.picker.dispose();
                                _self.picker = null;
                            });
                        }

                    }, false);
                });
            })(mui);
            var data = {
                    calculable: false,
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        data: [{
                            value: 25,
                            name: '尖:25%'
                        }, {
                            value: 25,
                            name: '峰:25%'
                        }, {
                            value: 25,
                            name: '平:25%'
                        }, {
                            value: 25,
                            name: '谷:25%'
                        }]
                    }]
                }
            var pieChart1 = echarts.init(document.getElementById('pieChart1'));
            pieChart1.setOption(data);
            var pieChart2 = echarts.init(document.getElementById('pieChart2'));
            pieChart2.setOption(data);
        </script>
    </body>
</html>

页面预览
列表展示页面

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="UTF-8">
        <title></title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 id="title" class="mui-title">巡检计划任务列表</h1>
            <div style="right:10px;float: right;text-align: right;color: #83838e;" class="mui-title">用户名</div>
        </header>
        <div class="mui-scroll-wrapper" style="top:45px">
            <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse mui-active">
                    <a class="mui-navigate-right">未确认计划</a>
                    <div class="mui-collapse-content" style="padding-top: 0px;">
                        <ul class="mui-table-view" style="margin-top: 0px;">
                            <li style="padding-left: 15px;" class="mui-table-view-cell">
                                <a onclick="unconfirm(1)">
                                    <div style="width: 75%;float: left;padding-top: 15px;">
                                        <img class="mui-media-object mui-pull-left" src="images/qq.png">
                                        <div class="mui-media-body">
                                            A计划
                                            <p class='mui-ellipsis'>A计划详细描述...</p>
                                            <p class='mui-ellipsis'>2018/03/01-2018/03/25</p>
                                        </div>
                                    </div>
                                    <div style="color: red;text-align: right;padding-top: 30px;">
                                        确认中
                                    </div>
                                </a>
                            </li>
                            <li style="padding-left: 15px;padding-top: 5px;" class="mui-table-view-cell">
                                <a onclick="unconfirm(1)">
                                    <div style="width: 75%;float: left;padding-top: 15px;">
                                        <img class="mui-media-object mui-pull-left" src="images/qq.png">
                                        <div class="mui-media-body">
                                            B计划
                                            <p class='mui-ellipsis'>B计划详细描述...</p>
                                            <p class='mui-ellipsis'>2018/03/03-2018/03/26</p>
                                        </div>
                                    </div>
                                    <div style="color: red;text-align: right;padding-top: 30px;">
                                        确认中
                                    </div>
                                </a>
                            </li>
                            <li style="padding-left: 15px;padding-top: 5px;" class="mui-table-view-cell">
                                <a onclick="unconfirm(1)">
                                    <div style="width: 75%;float: left;padding-top: 15px;">
                                        <img class="mui-media-object mui-pull-left" src="images/qq.png">
                                        <div class="mui-media-body">
                                            C计划
                                            <p class='mui-ellipsis'>C计划详细描述...</p>
                                            <p class='mui-ellipsis'>2018/03/03-2018/03/26</p>
                                        </div>
                                    </div>
                                    <div style="color: red;text-align: right;padding-top: 30px;">
                                        确认中
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse mui-active">
                    <a class="mui-navigate-right">已确认计划</a>
                    <div class="mui-collapse-content" style="padding-top: 0px;">
                        <ul class="mui-table-view" style="margin-top: 0px;">
                            <li style="padding-left: 15px;" class="mui-table-view-cell">
                                <a onclick="unexecute(1)">
                                    <div style="width: 75%;float: left;padding-top: 15px;">
                                        <img class="mui-media-object mui-pull-left" src="images/qq.png">
                                        <div class="mui-media-body">
                                            D计划
                                            <p class='mui-ellipsis'>D计划详细描述...</p>
                                            <p class='mui-ellipsis'>2018/03/01-2018/03/25</p>
                                        </div>
                                    </div>
                                    <div style="color: red;text-align: right;padding-top: 30px;">
                                        已确认
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse mui-active">
                    <a class="mui-navigate-right">执行中计划</a>
                    <div class="mui-collapse-content" style="padding-top: 0px;">
                        <ul class="mui-table-view" style="margin-top: 0px;">
                            <li style="padding-left: 15px;" class="mui-table-view-cell">
                                <a>
                                    <div style="width: 75%;float: left;padding-top: 15px;">
                                        <img class="mui-media-object mui-pull-left" src="images/qq.png">
                                        <div class="mui-media-body">
                                            E计划
                                            <p class='mui-ellipsis'>E计划详细描述...</p>
                                            <p class='mui-ellipsis'>2018/03/01-2018/03/25</p>
                                        </div>
                                    </div>
                                    <div style="color: blue;text-align: right;padding-top: 30px;">
                                        执行中
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right">历史计划</a>
                    <div class="mui-collapse-content" style="padding-top: 0px;">
                        <ul class="mui-table-view" style="margin-top: 0px;">
                            <li style="padding-left: 15px;" class="mui-table-view-cell">
                                <a>
                                    <div style="width: 75%;float: left;padding-top: 15px;">
                                        <img class="mui-media-object mui-pull-left" src="images/qq.png">
                                        <div class="mui-media-body">
                                            F计划
                                            <p class='mui-ellipsis'>F计划详细描述...</p>
                                            <p class='mui-ellipsis'>2018/03/01-2018/03/25</p>
                                        </div>
                                    </div>
                                    <div style="color: gray;text-align: right;padding-top: 30px;">
                                        已完成
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            </div>
        </div>
        <script>
            mui(".mui-scroll-wrapper").scroll();
            function unconfirm(id){
                mui.openWindow({
                    url:"unconfirm_inspection.html",
                    extras:{
                        id:id
                    }
                })
            }
            function unexecute(id){
                mui.openWindow({
                    url:"unexecute_inspection.html",
                    extras:{
                        id:id
                    }
                })
            }
            /*(function($) {
                $.init();
                var atns = $('.aclick');
                atns.each(function(i, atn) {
                    atn.addEventListener('tap', function() {
                        var _self = this;
                        console.log(_self);
                    }, false);
                });
            })(mui);*/
        </script>
    </body>
</html>

列表预览

遇到的问题

1、手机端页面上拉刷新与页面滚动冲突问题。
解决方法：
(1）mui(“.mui-scroll-wrapper”).scroll();初始化滚动区域。
(2）检测是否对滚动区域增加固定高度等相关样式。
(3）滚动区域中内容的问题，例如多个ul，检测相关ul样式。
2、使用webview跳转页面（底部选项卡），单击选项卡时，显示页面出现页面刷新闪动问题。
(1）通过数组方式存储起来把页面。plus.webview.create创建页面。
3、webview跳转页面，第一次页面加载时，页面echart图无法加载，报dom没有指定其高度问题。
(1）因为用href属性在主页面加载时，把页面加载进来，对除了默认页面的以为的其它页面，dom没有渲染。改为点击选项卡时加载页面plus.webview.create。

选项卡页面

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</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">
        <style>
            html,
            body {
                background-color: #efeff4;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-bars"></a>
            <h1 id="title" class="mui-title">锦上智电网平台</h1>
            <div style="right:10px;float: right;text-align: right;color: #83838e;" class="mui-title">用户名</div>
        </header>
        <nav class="mui-bar mui-bar-tab" style="touch-action: none">
            <a id="defaultTab" class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="monitoring.html">
                <span class="mui-icon mui-icon-videocam"></span>
                <span class="mui-tab-label">监视</span>
            </a>
            <a class="mui-tab-item" href="energyEfficiency.html">
                <span class="mui-icon mui-icon-paperplane"></span>
                <span class="mui-tab-label">能效</span>
            </a>
            <a class="mui-tab-item" href="perationAndMaintenance.html">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">运维</span>
            </a>
        </nav>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            //mui初始化
            mui.init();
            var href = '';
            var type = window.localStorage.getItem("type");
            if(type == 'admin'){
                 href = 'sitePage.html';
            }else{
                 href = 'sitePersonPage.html';
            }
            document.getElementById("defaultTab").href=href;
            var subpages = [href, 'monitoring.html', 'energyEfficiency.html', 'perationAndMaintenance.html'];
            var subpage_style = {
                top: '45px',
                bottom: '51px'
            };
            var aniShow = {};
            //创建子页面，首个选项卡页面显示，其它均隐藏；
            mui.plusReady(function() {
                var self = plus.webview.currentWebview();
                /*for(var i = 0; i < 4; i++) {
                    var temp = {};
                    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 temp = {};
                var sub = plus.webview.create(subpages[0], subpages[0], subpage_style);
                temp[subpages[0]] = "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;
                }
                //更换标题
                //title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                //显示目标选项卡
                plus.webview.close(targetTab);
                var s = plus.webview.create(targetTab, targetTab, subpage_style);
                plus.webview.currentWebview().append(s);
                //若为iOS平台或非首次显示，则直接显示
                if(mui.os.ios || aniShow[targetTab]) {
                    plus.webview.show(targetTab);
                    //console.log("显示1"+targetTab);
                } else {
                    //否则，使用fade-in动画，且保存变量
                    var temp = {};
                    temp[targetTab] = "true";
                    mui.extend(aniShow, temp);
                    plus.webview.show(targetTab, "fade-in", 300);
                    //console.log("显示2"+targetTab);
                }
                //隐藏当前;
                plus.webview.hide(activeTab);
                //更改当前活跃的选项卡
                activeTab = targetTab;
            }, {
                passive: false
            });
            //自定义事件，模拟点击“首页选项卡”
            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');
                }
            }, {
                passive: false
            });
            //重新返回按钮
            var first = null;
            var oldback = mui.back;
            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();
                    }
                }
            };
        </script>
    </body>

</html>

选项卡预览

未编辑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MUI页面及遇到的bug

登陆页面模板&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxi
复制链接

扫一扫

专栏目录