Apicloud 底部导航实现

不念不忘少年蓝@ 2022-03-11 10:27 340阅读 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"/>
    
        <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>
            
            <i class="aui-iconfont aui-icon-cert"></i>
            <div class="aui-bar-tab-label">我的订单</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            
            <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>