Apicloud 底部导航实现

最新推荐文章于 2022-04-09 15:28:25 发布

即墨丹青

最新推荐文章于 2022-04-09 15:28:25 发布

阅读量2.5k

点赞数

分类专栏：知识库管理系统文章标签： App Apicloud 前端 tab 底部导航

本文链接：https://blog.csdn.net/qq_26282869/article/details/88320314

版权

知识库管理系统专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<!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>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/main.css"/>

</head>
<body>
<!-- 头部标题 -->
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn" id="left-btn" style="display: none;">
        <!-- 编辑 -->
        <span class="aui-iconfont aui-icon-left" style="color: #FFF;font-size: 1.5rem;"></span>
    </a>
    <div class="aui-title" id="center-title"></div>
    <a class="aui-pull-right aui-btn" id="right-btn">
          <!-- 搜索 -->
          <span class="aui-iconfont aui-icon-search" tapmode="hover" id="search" onclick="uploadVideo('search')"  style="color: #FFF;font-size: 1.5rem;"></span>
          <!-- 上传视频 -->
         <span class="aui-iconfont aui-icon-video" tapmode="hover" onclick="uploadVideo('video')" id="video" style="color: #FFF;font-size: 1.5rem;display: none;"></span>
    </a>
</header>


<!-- 底部导航 -->
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode >
         <i class="aui-iconfont aui-icon-calendar"></i>
        <div class="aui-bar-tab-label">任务中心</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-star"></i>
        <div class="aui-bar-tab-label">优券</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <!-- <div class="aui-badge">99</div> -->
        <i class="aui-iconfont aui-icon-cert"></i>
        <div class="aui-bar-tab-label">我的订单</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <!-- <div class="aui-dot"></div> -->
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">个人中心</div>
    </div>
</footer>
</body>
</html>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function () {
          $api.fixStatusBar($api.dom('header'));
          api.setStatusBarStyle({
            style: 'dark',
            color: '#fff'
          });
          var simInfoImp = api.require('simInfoImp');
          simInfoImp.getDeviceId(function(ret) {
            $api.setStorage('phoneMime', ret.deviceId);
          });

          exitNowApp();
          var tab = new auiTab({
            element:$api.byId('footer'),
            index:1,
            repeatClick:false
          },function(ret){
              open_frm(ret);
          });
          openFrames('task',1);
          $api.html($api.byId('center-title'), '任务中心');

    }
    //点击刷新
    function taskList(){

        openFrames('task',1);
    }
      /**
       * 底部菜单
       * @Author   kiwi
       * @DateTime 2018-09-16
       * @license  [license]
       * @version  [version]
       */
    
    function open_frm(ret){
      switch (ret.index) {
        case 1:
          openFrames('task',ret.index);
          document.getElementById('search').style.display = 'block'
          document.getElementById('video').style.display = 'none'
          $api.html($api.byId('center-title'), '任务中心');
          break;
        case 2:
            openFrames('quan',ret.index);
            document.getElementById('search').style.display = 'none'
            document.getElementById('video').style.display = 'none'
            $api.html($api.byId('center-title'), '优券');
          break;
        case 3:
          openFrames('order',ret.index);
          document.getElementById('search').style.display = 'none'
          document.getElementById('video').style.display = 'block'
          $api.html($api.byId('center-title'), '我的订单');
          break;
        case 4:
          openFrames('personal',ret.index);
          document.getElementById('search').style.display = 'none'
          document.getElementById('video').style.display = 'none'
          $api.html($api.byId('center-title'), '个人中心');
          break;
      }
    }
    function openFrames(pages,index){
      var reload = false;
      if (index==1||index==3) {
          reload = true;
      }
      $api.setStorage('index', index);

      var header = $api.dom('header');
      $api.fixStatusBar(header);
      var headerPos = $api.offset(header).h;
      var footer_h = $api.offset($api.dom('footer')).h;
       api.openFrame({
          name: pages,
          url: '../html/'+pages+'.html',
          rect: {
              x: 0,
              y: headerPos,
              w : 'auto',
              h: api.winHeight - headerPos - footer_h
          },
          reload: reload  //重新加载页面
      });

    }


  //退出APP
  function exitNowApp(){
    $api.setStorage('isFullScreen',0);
    //按两次退出应用
    api.addEventListener({
      name : 'keyback'
    }, function(ret, err) {
      //全屏时 需要发送事件 并关闭全屏
      var isFullScreen = $api.getStorage('isFullScreen');

      //如果全屏 只关闭全屏
      if(isFullScreen == '1'){
        api.sendEvent({
            name: 'clickhome',
            extra: {}
        });
      }else{
        api.toast({
          msg : '再点一次退出应用',
          duration : 2000,
          location : 'bottom'
        });
        api.addEventListener({
          name : 'keyback'
        }, function(ret, err) {
          if($api.getStorage('isFullScreen' == "0")){
            api.sendEvent({
                name: 'clickhome',
                extra: {}
            });
          }else{
            api.closeWidget({
              silent : true
            });
          }

        });
      }

      setTimeout(function() {
      }, 2000)
    });
 }
 function uploadVideo(param){
      api.openWin({
          name: param,
          url: '../html/'+param+'.html',
          pageParam: {
              name: 'value'
          }
      });
    }

</script>

即墨丹青

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Apicloud 底部导航实现

&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,initi
复制链接

扫一扫