apicloud

<!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>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/aui/aui.css" />
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style type="text/css">
      .normal{
        display: none;
      }
      .active{
        display: block;
      }
    </style>
</head>

<body class="wrap">
    <div id="app">
        <header class="aui-bar aui-bar-nav normal" v-for="(menu,index) in menus" v-bind:class="{active:index==cur_menu}">
          {{menu.title}}
        </header>
        <footer class="aui-bar aui-bar-tab" id="footer">
            <div class="aui-bar-tab-item" v-for="(menu,index) in menus" v-on:click="switchFrame(index)" v-bind:class="{'aui-active':index==cur_menu}"   tapmode>
                <i class="aui-iconfont aui-icon-home" v-if="index==0"></i>
                <i class="aui-iconfont aui-icon-menu" v-if="index==1"></i>
                <i class="aui-iconfont aui-icon-my" v-if="index==2"></i>
                <div class="aui-bar-tab-label">{{menu.title}}</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        var headers = $api.domAll("header");
        for (var i = 0; i < headers.length; i++) {
          $api.fixStatusBar(headers[i]);
        }
        api.setStatusBarStyle({
            style: 'light',
            color:'#0064b0'
        });
        vm.init();
    }

    var vm = new Vue({
      el:"#app",
      data:{
        cur_menu:0,
        menus:[
          {title:'首页'},
          {title:'分类'},
          {title:'我的'},
        ],
      },
      methods:{
          init:function(){
              var headerH = $api.dom("header").offsetHeight;
              var footerH = $api.dom("footer").offsetHeight;
              var frameH = api.winHeight - headerH -footerH;
              api.openFrameGroup ({
                  name: 'NewsGroup',
                  background: '#fff',
                  scrollEnabled: false,
                  rect: {
                       x: 0,
                       y: headerH,
                       w: 'auto',
                       h: frameH
                  },
                  frames: [{
                      name: 'home',
                      url: './html/home.html',
                      bgColor: '#f5f5f5',
                      bounces:false
                  },{
                      name: 'category',
                      url: './html/category.html',
                      bgColor: '#f5f5f5',
                      bounces:false
                  },{
                      name: 'user',
                      url: './html/user.html',
                      bgColor: '#f5f5f5',
                      bounces:false
                  }]
              }, function(ret, err){
                  // if( ret ){
                  //      alert( JSON.stringify( ret ) );
                  // }else{
                  //      alert( JSON.stringify( err ) );
                  // }
              });
          },
          switchFrame:function(index){
              if(vm.cur_menu==index){
                return false;
              }
              vm.cur_menu=index;
              api.setFrameGroupIndex({
                  name: 'NewsGroup',
                  index: index,
              });
          }
      }
    });
</script>
</html>
猜你喜欢
