优化单页面功能实现

demo/js/biz/page-modal.js

@@ -60,10 +60,10 @@ require(["ipu", "jquery"], function (ipu, $) {
        });
        $content.on('click', '.showPreloader', function () {
            ipu.showPreloader('正在加载中');
            setTimeout(function () {
            ipu.showPreloader('正在加载中', 300);
            //setTimeout(function () {
                ipu.hidePreloader();
            }, 3000);
            //}, 3000);
        });
        $content.on('click', '.showIndicator', function () {
            ipu.showIndicator();

src/js/modal.js

@@ -132,17 +132,44 @@
        });
    };
    ipu.showPreloader = function (title) {
        ipu.hidePreloader();
    var minLoad = false;        // 是否最小时间调用方式
    var loadOverTime = false;   // 是否超过最小调用时间
    var loadEnd = false;        // 是否调用结束
    var loadTimeOut = null;     // 延时调用ID
    ipu.showPreloader = function (title, minTime) {
        ipu.hidePreloader(true);
        ipu.showPreloader.preloaderModal = ipu.modal({
            title: title || defaults.modalPreloaderTitle,
            text: '<div class="ui-preloader"></div>'
        });
        if(minTime){
            minLoad = true;
            loadTimeOut = setTimeout(function () {
                loadOverTime = true;
                if(loadEnd){
                    ipu.hidePreloader();
                }
            }, minTime);
        }
        return ipu.showPreloader.preloaderModal;
    };
    ipu.hidePreloader = function () {
        ipu.showPreloader.preloaderModal && ipu.closeModal(ipu.showPreloader.preloaderModal);
    ipu.hidePreloader = function (force) {
        if(force || !minLoad || (minLoad && loadOverTime)){
            if(force && loadTimeOut){
                window.clearTimeout(loadTimeOut);
            }
            ipu.showPreloader.preloaderModal && ipu.closeModal(ipu.showPreloader.preloaderModal);
            minLoad = false; // 重置各标志位
            loadOverTime = false;
            loadEnd = false;
            loadTimeOut = null;
        }else{
            loadEnd = true;
        }
    };
    ipu.showIndicator = function () {
        if ($('.ui-preloader-indicator-modal')[0]) return;

src/js/pages.js

@@ -70,22 +70,20 @@
    page.options = {     // 那个窗口执行open,默认父窗口
        target: window.parent, // 默认执行父窗口
        backIndex: 1,    // 默认回退一页
        closeIndex: 1,   // 默认关闭最近一个页面
        backIndex: -1,    // 默认回退一页
        closeIndex: -1,   // 默认关闭最近一个页面
        params:{},        // post的默认参数
        animate: true,     // 是否动画效果
        showLoading: true,   // 是否显示加载消息
        loadingMessage: '正在加载中',
        method : null,     // 请求方式，用户不需要设置
        minMessageTime: 50, // 最小显示加载时间
        minMessageTime: 500, // 最小显示加载时间，避免出现闪现的情况
        callBack:function () { // 事件回调
        }
    };
    // 当前页面加载，针对顶层父窗口
    page.openPage = function (url, options) {
        var overTime = false; // 超过100ms豪秒
        var transEnd = false; // 动画结束
        var newPage = null;
        var nowPageNo = pageIdPrefix + (pageNo++);
        maps[nowPageNo] = url;
@@ -93,14 +91,7 @@
        checkPages();
        if(options.showLoading){
            ipu.showPreloader(options.loadingMessage);
            setTimeout(function () {
                overTime = true;
                if (transEnd) {
                    ipu.hidePreloader();
                }
            }, options.minMessageTime);  // 保证最少显示100ms，不出现闪现的情况
            ipu.showPreloader(options.loadingMessage, options.minMessageTime);
        }
        if(options.method == 'post'){
@@ -117,11 +108,7 @@
        function end() {
            if(options.showLoading) {
                if (!overTime) {
                    transEnd = true;
                } else {
                    ipu.hidePreloader();
                }
                ipu.hidePreloader();
            }
            if(options.animate) {
@@ -135,7 +122,7 @@
        }
        $(".ui-page-iframe", newPage).one('load', function () {
            newPage.addClass("ui-show");
            newPage.addClass("ui-show").width(); // 强制生效，否则可能出现页面闪现，无动画情况
            if(firstPage){
                animatePage.removeClass("ui-pages-first");
@@ -168,9 +155,13 @@
        if(backIndex == 0){
            page = $(".ui-page:first", pagesObj);
        }else {
        }else { // 越界的情况
            var prevPage = nowPage.prevAll(".ui-page");
            page= $(prevPage[options.backIndex - 1]);
            if(backIndex < 0){
                page= $(prevPage[backIndex + 1]);
            }else{
                page= $(prevPage[prevPage.size() + backIndex - 2]);
            }
        }
        var animatePage = nowPage;
@@ -220,8 +211,15 @@
    // 往前关闭窗口
    page.closePage = function (options) {
        var closePage = options.closeIndex - 1;
        var prevPage = $(".ui-page.ui-show").prevAll(".ui-page");
        var closePage = options.closeIndex;
        var prevPage = $(".ui-page.ui-show", pagesObj).prevAll(".ui-page");
        if(closePage < 0){
            closePage = closePage + 1;
        }else{
            closePage = prevPage.size() - 1 + closePage - 1;
        }
        $(prevPage[closePage]).remove();
        if(options.callBack){
            options.callBack();

src/sass/ipu/component/pages.scss

@@ -5,8 +5,8 @@
    left:0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    overflow: hidden;
}
.ui-pages{
    z-index: 10000;
@@ -37,12 +37,17 @@
    z-index: 1;
    display: block;
}
.ui-pages, .ui-page{
    &.ui-anim{
        overflow: auto;
        box-shadow:-0.01rem 0rem rgba(0,0,0,.6);
    }
}
.ui-anim{
    animation-duration: $ts-time;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes slideRightIn {
    0% { transform: translate3d(100%,0,0)}
    100% { transform: translate3d(0%,0,0) }