sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
        }

        .aui-nav .aui-bar-tab {
            background: #fff;
        }
        /*.aui-bar {
            text-align: center;
            height: 3.3rem;
        }*/
        .btn-icon {
            width: 1.2rem;
            margin: 0 auto;
            margin-bottom: 3px;
        }

        .aui-bar-tab .aui-bar-tab-item {
            padding: 10px 0;
            box-sizing: border-box;
        }

        .aui-bar1 {
            position: relative;
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
            width: 100%;
            min-height: 2.25rem;
            font-size: 0.9rem;
            text-align: center;
            display: table;
        }
        /*底部切换栏*/

        .aui-bar-tab1 {
            position: fixed;
            top: auto;
            bottom: 0;
            table-layout: fixed;
            background-color: #ffffff;
            color: #757575;
        }

        .aui-bar-tab1 .aui-bar-tab-item {
            display: table-cell;
            position: relative;
            width: 1%;
            height: 2.5rem;
            text-align: center;
            vertical-align: middle;
            padding: 5px 0;
        }

        .aui-bar-tab-label {
            font-size: 0.8rem;
            margin-top: -5px;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
      <!-- <div>
        <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a>
        <div class="aui-title" id="aui-title">
            积分商场
        </div>
      </div> -->
    </header>
    <footer class="aui-bar1 aui-bar-tab1" id="footer">
        <div class="aui-bar-tab-item aui-active" tapmode>
            <img src="./img/images/tabar_home_active.png" id="index1" class="btn-icon" />
            <div class="aui-bar-tab-label">
                首页
            </div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <img src="./img/images/shop_inactive.png" id="index2" class="btn-icon" />
            <div class="aui-bar-tab-label">
                购物车
            </div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <img src="./img/images/wode.png" id="index3" class="btn-icon" />
            <div class="aui-bar-tab-label">
                个人中心
            </div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript">
    function closeWin() {
        api.closeWin({});
    }
    apiready = function() {
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        var footer = $api.byId('footer');
		$api.fixTabBar(footer)
        var body_h = $api.offset($api.dom('body')).h;
        var footer_h = $api.offset($api.byId('footer')).h;
        openFrameGroup(headerPos, body_h, footer_h);
        ///  打开页面组
        var tab = new auiTab({
            element: document.getElementById("footer"),
        }, function(ret) {
            if (ret.index == 1) {
                $api.attr($api.byId('index1'), 'src', './img/images/tabar_home_active.png');
                $api.attr($api.byId('index2'), 'src', './img/images/shop_inactive.png');
                $api.attr($api.byId('index3'), 'src', './img/images/wode.png');
                api.sendEvent({
                    name: 'refreshindex',
                    extra: {
                    }
                });
            } else if (ret.index == 2) {
                $api.attr($api.byId('index1'), 'src', './img/images/tabar_home_inactive.png');
                $api.attr($api.byId('index2'), 'src', './img/images/shop_active.png');
                $api.attr($api.byId('index3'), 'src', './img/images/wode.png');
                api.sendEvent({
                    name: 'refreshshop',
                    extra: {
                    }
                });
            } else {
                $api.attr($api.byId('index1'), 'src', './img/images/tabar_home_inactive.png');
                $api.attr($api.byId('index2'), 'src', './img/images/shop_inactive.png');
                $api.attr($api.byId('index3'), 'src', './img/images/wode_active.png');
                api.sendEvent({
                    name: 'refreshmy',
                    extra: {
                    }
                });
            }
            api.setFrameGroupIndex({
                name: 'indexGroup',
                index: (ret.index - 1),
            });
        });
    };
    //  打开页面组
    function openFrameGroup(headerPos, body_h, footer_h) {
        api.openFrameGroup({
            name: 'indexGroup',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: body_h - footer_h
            },
            index: 0,
            reload: true,
            frames: [{
                name: 'main',
                url: 'integral_index.html',
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                bounces: false,
            }, {
                name: 'shop',
                url: 'integral_shop.html',
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                bounces: false,
            }, {
                name: 'my',
                url: 'integral_my.html',
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                bounces: false,
            }],
        }, function(ret, err) {
            if (ret.index == 1) {
                $api.addCls($api.byId('aui-header'));
            } else {
                $api.removeCls($api.byId('aui-header'));
            }
        });
    }
</script>

</html>