1. 程式人生 > >mui底部導航

mui底部導航

    mui.init({
        gestureConfig: {
            doubletap: true
        },
        subpages: [{
            url: 'shouye.html',
            id: 'MainViwe',
            styles: {
                top: '0',
                bottom: '51px'
            }
        }]
    });
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 減速係數,係數越大,滾動速度越慢,滾動距離越小,預設值0.0006
    });
    //底部選項卡切換跳轉
    (function jumpPage() {
        //跳轉頁面
        var subpages = ['ShoppingCart.html', 'shouye.html','PersonalCenter.html'];
        var subpage_style = {
            top:'44px',
            bottom:'51px'
        };
        var aniShow = {}; //動畫顯示
        //首次啟動切滑效果
        //當前啟用選項
        var activeTab = subpages[0];
        //選項卡點選事件
        mui('.mui-bar-tab').on('tap', 'a', function(e) {
            var targetTab = this.getAttribute('href');
            $('#MainViwe').attr('src', targetTab);
            var A = document.getElementById("MainViwe")
            console.log(A)
        });
        //自定義事件,模擬點選“首頁選項卡”
        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');
            }
        });
    })();