wind
wind
  • 发布:2015-09-17 15:20
  • 更新:2015-09-17 17:22
  • 阅读:7359

MUI页面跳转优化方案,求解!

分类:MUI
<div class="mui-content">  
            <ul id="list" class="mui-table-view mui-table-view-chevron">  
                <li class="mui-table-view-cell">  
                    <a class="mui-navigate-right" href="examples/accordion.html">  
                        accordion(折叠面板)  
                    </a>  
                </li>  
            </ul>  
        </div>  

<script>  
            var aniShow = "pop-in";  
             //只有ios支持的功能需要在Android平台隐藏;  
            if (mui.os.android) {  
                var list = document.querySelectorAll('.ios-only');  
                if (list) {  
                    for (var i = 0; i < list.length; i++) {  
                        list[i].style.display = 'none';  
                    }  
                }  
                //Android平台暂时使用slide-in-right动画  
                if(parseFloat(mui.os.version)<4.4){  
                    aniShow = "slide-in-right";  
                }  
            }  
            var templates = {};  
            var getTemplate = function(name, header, content) {  
                var template = templates[name];  
                if (!template) {  
                    //预加载共用父模板;  
                    var headerWebview = mui.preload({  
                        url: header,  
                        id: name + "-main",  
                        styles: {  
                            popGesture: "hide",  
                        },  
                        extras: {  
                            mType: 'main'  
                        }  
                    });  
                    //预加载共用子webview  
                    var subWebview = mui.preload({  
                        url: !content ? "" : content,  
                        id: name + "-sub",  
                        styles: {  
                            top: '45px',  
                            bottom: '0px',  
                        },  
                        extras: {  
                            mType: 'sub'  
                        }  
                    });  
                    subWebview.addEventListener('loaded', function() {  
                        setTimeout(function() {  
                            subWebview.show();  
                        }, 50);  
                    });  
                    subWebview.hide();  
                    headerWebview.append(subWebview);  
                    //iOS平台支持侧滑关闭,父窗体侧滑隐藏后,同时需要隐藏子窗体;  
                    if (mui.os.ios) { //5+父窗体隐藏,子窗体还可以看到?不符合逻辑吧?  
                        headerWebview.addEventListener('hide', function() {  
                            subWebview.hide("none");  
                        });  
                    }  
                    templates[name] = template = {  
                        name: name,  
                        header: headerWebview,  
                        content: subWebview,  
                    };  
                }  
                return template;  
            };  
            var initTemplates = function() {  
                getTemplate('default', 'examples/template.html');  
            };  
             //主列表点击事件  
            mui('#list').on('tap', 'a', function() {  
                var id = this.getAttribute('href');  
                var href = this.href;  
                var type = this.getAttribute("open-type");  
                //不使用父子模板方案的页面  
                if (type == "common") {  
                    var webview_style = {  
                        popGesture: "close"  
                    };  
                    //侧滑菜单需动态控制一下zindex值;  
                    if (~id.indexOf('')) {  
                        webview_style.zindex = 9998;  
                        webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";  
                    }  
                    mui.openWindow({  
                        id: id,  
                        url: this.href,  
                        styles: webview_style,  
                        show: {  
                            aniShow: aniShow  
                        },  
                        waiting: {  
                            autoShow: false  
                        }  
                    });  
                } else if (id && ~id.indexOf('.html')) {  
                    if (!~id.indexOf('popovers.html')&&mui.os.ios) {  
                        mui.openWindow({  
                            id: id,  
                            url: this.href,  
                            styles: {  
                                popGesture: 'close'  
                            },  
                            show: {  
                                aniShow: aniShow  
                            },  
                            waiting: {  
                                autoShow: false  
                            }  
                        });  
                    } else {  
                        //TODO  by chb 当初这么设计,是为了一个App中有多个模板,目前仅有一个模板的情况下,实际上无需这么复杂  
                        //使用父子模板方案打开的页面  
                        //获得共用模板组  
                        var template = getTemplate('default');  
                        //判断是否显示右上角menu图标;  
                        var showMenu = ~href.indexOf('popovers.html') ? true : false;  
                        //获得共用父模板  
                        var headerWebview = template.header;  
                        //获得共用子webview  
                        var contentWebview = template.content;  
                        var title = this.innerText.trim();  
                        //通知模板修改标题,并显示隐藏右上角图标;  
                        mui.fire(headerWebview, 'updateHeader', {  
                            title: title,  
                            showMenu: showMenu,  
                            target:href,  
                            aniShow: aniShow  
                        });  

                        if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){  
                            var reload = true;  
                            if (!template.loaded) {  
                                if (contentWebview.getURL() != this.href) {  
                                    contentWebview.loadURL(this.href);  
                                } else {  
                                    reload = false;  
                                }  
                            } else {  
                                reload = false;  
                            }  
                            (!reload) && contentWebview.show();  

                            headerWebview.show(aniShow, 150);  
                        }  
                    }  
                }  
            });  
            var index = null; //主页面  
            function openMenu() {  
                !index && (index = mui.currentWebview.parent());  
                mui.fire(index, "menu:open");  
            }  
            //在android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常  
            window.addEventListener('dragstart', function(e) {  
                mui.gestures.touch.lockDirection = true; //锁定方向  
                mui.gestures.touch.startDirection = e.detail.direction;  
            });  
            window.addEventListener('dragright', function(e) {  
                if (!mui.isScrolling) {  
                    e.detail.gesture.preventDefault();  
                }  
            });  
             //监听右滑事件,若侧滑菜单未显示,右滑要显示菜单;  
            window.addEventListener("swiperight", function(e) {  
                //默认滑动角度在-45度到45度之间,都会触发右滑菜单,为避免误操作,可自定义限制滑动角度;  
                if (Math.abs(e.detail.angle) < 4) {  
                    openMenu();  
                }  
            });  
        </script>  

求解:
//判断是否显示右上角menu图标;
var showMenu = ~href.indexOf('popovers.html') ? true : false;

怎么多了这个 popovers.html,而且,显示的内容明明是info.html的。

我的主要问题是:如何在右上角显示指定的html和怎么修改多余的这个MUI页面跳转到优化方案呢?

我详细的看过官方的优化方案了,H5+没做优化,就是MUI做的优化不错,而且写的是利用a标签引入跳转,同时,利用tap点击事件来达成目的。

但我不知道该解决这个一个页面多个列表都使用跳转的方式,不知道该怎么解决。
请官方指教!

2015-09-17 15:20 负责人:无 分享
已邀请:
wind

wind (作者)

明明有些拆出来的JS可以了,但还是有点不行,也不知道哪里不行,我想可以调用到多个列表页面都可以使用的情况。

wind

wind (作者)

有人回答下吗????

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