apicloud
Posted mracalele
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于apicloud的主要内容,如果未能解决你的问题,请参考以下文章