apicloud與vue實現app首頁和頁面跳轉
阿新 • • 發佈：2018-12-20
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <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.css" /> </head> <body> <div id="app"> <header class="aui-bar aui-bar-nav disnone" v-for="(vo,index) in list" v-bind:class="{'disblock': active_index == index}"> {{vo.title}} </header> <footer class="aui-bar aui-bar-tab"> <div class="aui-bar-tab-item " v-for="(vo,index) in list" v-bind:class="{'aui-active':active_index==index}" tapmode @click="changeMenu(index)"> <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">{{vo.title}}</div> </div> </footer> </div> </body> <script type="text/javascript" src="./script/api.js"></script> <script type="text/javascript" src="./script/aui-tab.js"></script> <script type="text/javascript" src="./script/vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ active_index:0, list:[ {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 }, index: vm.active_index, frames: [{ name: 'index', url: './html/index.html', bgColor: '#fff', bounces:false },{ name: 'category', url: './html/category.html', bgColor: '#fff', bounces:false },{ name: 'user', url: './html/user.html', bgColor: '#fff', bounces:false }] }, function(ret, err){ if( ret ){ }else{ } }); }, changeMenu:function(index){ vm.active_index=index; api.setFrameGroupIndex({ name: 'newsGroup', index: index, scroll: false }); } } }); apiready=function(){ var headerList=$api.domAll('header'); for(var i=0;i<headerList.length;i++){ $api.fixStatusBar($api.dom('header')); } api.setStatusBarStyle({ style: 'light', color:'5ab494' }); vm.init(); } </script> </html>