apicloud与vue实现app首页和页面跳转

最新推荐文章于 2024-05-12 04:40:08 发布

Zepeng Shen

最新推荐文章于 2024-05-12 04:40:08 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： app

本文链接：https://blog.csdn.net/weixin_37595711/article/details/83958609

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

Zepeng Shen

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
apicloud与vue实现app首页和页面跳转

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,init
复制链接

扫一扫

专栏目录