lolbox.duowan.com/mbox/main.js

import $ from 'jquery';
import Vue from 'vue';
// import Vuex from 'vuex';
import App from './components/app.vue';
import lib from 'lib';
import BDY from 'BDY';
// import NProgress from './depend/nprogress/nprogress';

// import User from './store/user';
// Vue.use(Vuex);
// const store = new Vuex.Store({
//     mutations: {},
//     actions: {},
//     getters: {},
//     modules: {
//     }
// })

Vue.component('loading', resolve => require(['./components/loading.vue'], resolve));

Vue.component('hero-index', resolve => require(['./page/hero/index.vue'], resolve));
Vue.component('equip-build', resolve => require(['./page/equip/build.vue'], resolve));
Vue.component('equip-info', resolve => require(['./page/equip/info.vue'], resolve));
Vue.component('ability-info', resolve => require(['./page/ability/info.vue'], resolve));

Vue.component('match-info', resolve => require(['./page/match/info.vue'], resolve));
Vue.component('match-detail', resolve => require(['./page/match/detail.vue'], resolve));



var pages = {};
var oldPage;

var VM = new Vue({
    // store,
    el: "#app",
    data: {
        currentView: "",
        isForward: true,
        isInit: true,
        transitionName: "fade"
    },
    computed: {
        transitionMode () {
            return this.isForward ? "out-int" : "in-out";
        }
    },
    mounted() {
        var _self = this;
        var page = lib.getParam("page") || "hero-index";
        lib.setParam("page", page);
        _self._redirectPage(page);

        // 点击事件
        $('body').off(BDY.click + ".data-href").on(BDY.click + ".data-href", '[data-href]', function () {
            var $this = $(this);

            var href = $this.attr('data-href') || $this.attr('href');

            var clientParam = $this.attr('data-client');
            var replace = $this.attr('data-replace');
            if (clientParam != null) {
                _self.redirectClient(href, clientParam);
            } else if (replace != null) {
                _self.redirect2(href);
            } else {
                _self.redirect(href);
            }

            return false;
        });

        $('body').off(BDY.click + ".data-url").on(BDY.click + ".data-url", '[data-url]', function () {
            var $this = $(this);

            var href = $this.attr('data-url');
            location.href = href;

            return false;
        });

        window.onpopstate = function (event) {
            // 支持onpopstate
            var count = 0;
            for (var page in pages) {
                if (count++ > 1) {
                    break;
                };
            }

            // 防止首次进入就触发onpopstate导致再次刷新
            if (count > 1) {
                var newPage = lib.getParam('page') || 'hero-index';
                _self._redirectPage(newPage);
            }
        }

        initActiveEvent();
    },
    methods: {
        afterEnter: function () {
            if (VM.isForward) {
                scrollTo(0, 0);
            } else {
                var scrollTop = pages[lib.getParam("page")]['scrollTop'] || 0;
                scrollTo(0, scrollTop);
            }
            VM.isForward = false;
            // NProgress.done();
        },
        _redirectPage(_page) {
            var _self = this;

            /** 当前页面不重复请求 */
            if (_self.currentView == _page) {
                return;
            }

            // var mainPage = ['hero-index', 'bbs-index', 'user-center'];
            // if (mainPage.indexOf(_page) > -1) {
            //     $('.weui-tabbar').show();
            //     $('.weui-bar__item_on').removeClass('weui-bar__item_on');
            //     $('#' + _page).addClass('weui-bar__item_on');
            // } else {
            //     $('.weui-tabbar').hide();
            // }

            pages[_page] = pages[_page] || {};

            // NProgress.start();

            if (oldPage) {
                pages[oldPage] = pages[oldPage] || {};
                //保存滚动条位置$pageswarp
                // pages[oldPage]['scrollTop'] = document.body.scrollTop;
                //console.log("oldPage:" + oldPage + ", scrollTop:" + pages[oldPage]['scrollTop']);
                // pages[oldPage]['height'] = $pageswarp.height();

                lib.clearRes();
            }

            _self.currentView = _page;
            oldPage = _page;
        },
        redirect(param) {
            this._redirect(param, true);
        },
        _redirect(param, causeHistory) {
            oldPage = this.currentView;
            pages[oldPage] = pages[oldPage] || {};
            pages[oldPage]['scrollTop'] = _getScrollTop();
            var values = lib.parseHash(param);
            this.isForward = true;
            lib.setParam(values, causeHistory);

            // 这里需要自己渲染
            this._redirectPage(values['page']);
        },
        redirect2(param) {
            var oldUrl = document.location.href;
            this._redirect(param, false);
            if (oldUrl != document.location.href) {
                var newPage = lib.getParam('page') || 'hero-index';
                this._redirectPage(newPage);
            }
        },
        redirectClient(param, clientParam, title) {
            var _self = this;
            oldPage = this.currentView;
            _self.redirect(param);
        },
        historyBack() {
            var curPage = this.currentView;
            pages[curPage] = pages[curPage] || {};
            pages[curPage]['scrollTop'] = 0;
            history.back();
        }
    }
})

function initActiveEvent() {
    var selector = "input[type='submit'], [data-active]";
    var $elem, $activeElem;
    var timeHandler = 0;
    var LONG_TAP_TIME = 500;

    $(document).off(BDY.touchstart + ".body").on(BDY.touchstart + ".body", function (e) {

        $elem = $(e.target);
        $activeElem = $elem;

        if (!$activeElem.filter(selector).length) {
            $activeElem = $activeElem.parents(selector);
        }

        var activeStyle = $activeElem.attr("data-active") || "active";
        $activeElem.addClass(activeStyle);

        timeHandler = lib.setTimeout(function () {
            $elem && $elem.trigger('longTap');
            _removeActive();
        }, LONG_TAP_TIME);
    });

    $(document).off("touchmove.body, scroll.body").on("touchmove.body, scroll.body", function (event) {
        clearTimeout(timeHandler);
        timeHandler = 0;

        _removeActive();
        $elem = null;
    });

    $(document).off("mouseout.body").on("mouseout.body", selector, function (event) {
        _removeActive();
        $elem = null;
    });

    window.onResume = document.createEvent('Event');
    window.onResume.initEvent('onResume', true, true);

    $(document).on('onResume', function () {
        console.log('onResume');
    });

    var lastTime = 0;
    $(document).off(BDY.touchend + ".body").on(BDY.touchend + ".body", function (e) {
        clearTimeout(timeHandler);
        timeHandler = 0;

        if ($elem) {
            var currentTime = (new Date()).getTime();
            var duration = currentTime - lastTime;
            var MIN_TRIGGER_INTERVAL = 300;

            if (duration > MIN_TRIGGER_INTERVAL) {
                $elem.trigger('touchclick');
                // 记录当前时间
                lastTime = currentTime;
            }
        }

        _removeActive();
    });

    function _removeActive() {
        if ($activeElem != null) {
            var activeStyle = $activeElem.attr("data-active") || "active";
            $activeElem.blur();
            $activeElem.removeClass(activeStyle);
            $activeElem = null;
        }
        $elem = null;
    }

    ['longTap', 'touchclick'].forEach(function (m) {
        $.fn[m] = function (callback) {
            return this.on(m, callback);
        };
    });
}


function _getScrollTop() {
    return document.documentElement.scrollTop || document.body && document.body.scrollTop;
}