AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）

最新推荐文章于 2022-12-02 15:22:20 发布

原创最新推荐文章于 2022-12-02 15:22:20 发布 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#下拉刷新 #AUI

apicloud 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用AUItab实现页签滑动切换和下拉刷新功能的方法，包括手动侧滑或点击TAB栏进行切换，以及在上翻页时更新数据的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：菜鸟一枚，入坑不久，如有欠缺，望大神给予好的建议，完善优化，分享他人。
AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）
1:aui tab分页签，手动侧滑或点击TAB栏可以切换。
2:下拉刷新（上翻页默认第一页，再下拉时更新第一页数据），上拉翻页显示数据列表。

ques_tab_win.html

<!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/framework7.material.css"/>
    <link rel="stylesheet" type="text/css" href="../css/my-app.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
        .empty{ text-align: center; padding: 120px 0; }
    </style>
</head>
<body>

  <header class="aui-bar aui-bar-nav" id="aui-header">
      <a class="aui-pull-left aui-btn" href="javascript();" onclick="backwin()">
          <img  style="font-size:24px;display: inline-block;
          box-sizing: border-box;vertical-align: middle;width:20px;" src="../image/back.png">
      </a>
      <div class="aui-title">案件上报</div>
      <a class="aui-pull-right aui-btn" href="#" onclick="openNewProblemReport()">
        上报新问题
                  </a>
  </header>



  <div class="aui-tab" id="tab">
        <div id="mytab_1" class="aui-tab-item aui-active" tapmode onclick="randomSwitchBtn(this,0)">待处理</div>
        <div id="mytab_2" class="aui-tab-item" tapmode onclick="randomSwitchBtn(this,1)">处理中</div>
        <div id="mytab_3" class="aui-tab-item" tapmode onclick="randomSwitchBtn(this,2)">已结案</div>
  </div>



</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/ardo.js"></script>
<script type="text/javascript">

apiready = function(){
      api.parseTapmode();
      var header = $api.byId('aui-header');
      //var footer =　$api.byId('footer');
      var mytab =　$api.byId('tab')
      //$api.fixStatusBar(header);
      var headerPos = $api.offset(header);
      var body_h = api.winHeight;
      //var footer_h = $api.offset(footer).h;
      var mytab_h = $api.offset(mytab).h;

      api.openFrameGroup ({
          name: 'footer_tab_demo',
          scrollEnabled:true,
          rect:{
              x:0,
              y:headerPos.h + mytab_h,//-23
              w:'auto',
              h:body_h - headerPos.h - mytab_h
          },
          index:0,
          preload:3,
          frames:
              [{
                    name: 'ques_daichuli',
                    url: 'ques_tab_list.html',
                    bounces:false,
                    pageParam:{
                        'state':0
                    }
              },{
                    name: 'ques_chulizhong',
                    url: 'ques_tab_list.html',
                    bounces:false,
                    pageParam:{
                        'state':1
                    }
              },{
                    name: 'ques_yijiean',
                    url: 'ques_tab_list.html',
                    bounces:false,
                    pageParam:{
                        'state':2
                    }
              }]
      }, function(ret, err){

            var mytab = $api.byId('tab');
            var mytabAct = $api.dom(mytab, '.aui-tab-item.aui-active');
            $api.removeCls(mytabAct, 'aui-active');

            var name = ret.name;
            var index = ret.index;
            if(index==0){
                $api.addCls($api.byId('mytab_1'), 'aui-active');
            }else if(index==1){
                $api.addCls($api.byId('mytab_2'), 'aui-active');
            }else if(index==2){
                $api.addCls($api.byId('mytab_3'), 'aui-active');
            }
        })
    }

    function closeWin(){
        api.closeWin();
    }

    function randomSwitchBtn(obj, index) {
        var mytab = $api.byId('tab');
        var mytabAct = $api.dom(mytab, '.aui-tab-item.aui-active');
        $api.removeCls(mytabAct, 'aui-active');
        $api.addCls(obj, 'aui-active');
        api.setFrameGroupIndex({
            name: 'footer_tab_demo',
            index: index,
            scroll:true
        });

    }

    //返回操作
    function backwin(){
      api.closeWin({
          name: '问题上报'
      });

    }

    //打开上报新问题页面
    function openNewProblemReport(){
      api.openWin({
          name: '上报新问题',
          url: '../html/frame31.html',
          pageParam: {
              name: 'test'
          }
      });
    }
</script>

ques_tab_list.html

<!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,aItemress=no">
    <title>案件上报列表-待处理、处理中、已结案</title>

    <link rel="stylesheet" type="text/css" href="../css/framework7.material.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
  <div class="tabs-animated-wrap">
    <div class="tabs">
      <div id="tab-1" class="tab">
        <div class="block">
          <div class="list-block" style="margin:0px;">
              <ul id="daichuliDiv">
                  <li v-for="item in list">
                      <a href="#" class="item-link item-content" onclick="openProblemReport({{item.id}})">
                          <i class="icon" style="width: 2rem;"><img src="../image/paper.png" ></i>
                          <div class="item-inner">
                              <div class="item-title" style="color:        #A0522D;">  {{item.remark}}</div>
                          </div>
                      </a>
                  </li>
              </ul>


          </div>

        </div>
      </div>

    </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/ardo.js"></script>
<script type="text/javascript">
  var select = 1;
  var state = 0;
  var ardo = new Vue({
        el: '#daichuliDiv',
        data: {
            p: 1,
            list: []
        }
    });

    apiready = function(){
        var pageParam = api.pageParam;
        state = pageParam.state;

        api.parseTapmode();

        queryList(state);
        api.setRefreshHeaderInfo({
              visible: true,
              loadingImg: 'widget://image/refresh.png',
              bgColor: '#f5f5f5',//#f5f5f5  #FAEBD7
              textColor: '#F08080',
              textDown: '下拉刷新...',
              textUp: '松开刷新...',
              showTime: true
          }, function (ret, err) {
              if(ardo.p != 1){
                  ardo.p = ardo.p - 1;
                  queryList(state);
              }else{
                  queryList(state);
                  ArdoTip("已更新到最新数据！下拉刷新上拉翻页");
              }
              api.refreshHeaderLoadDone();
          });


          api.addEventListener({
              name:'scrolltobottom',
              extra:{
                  threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
              }
          }, function(ret, err){
                ardo.p = ardo.p + 1;
                queryList(state);
          });
    }

    //查询数据
    function queryList(state) {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '加载中...',
            text: '请稍候...',
            modal: false
        });
        var req = {
            uid: $api.getStorage('user_id'),
            token: $api.getStorage('token'),
            page : ardo.p,
            status: state
        }
        ArdoAjax(APP_GETQUELIST, req, calbackfun);
   }

   function calbackfun(ret, err){
       api.hideProgress();
       if(ret.code=='ok'){
           //console.log(ret.list.length);
           if(ret.list.length != 0){
               ardo.list.splice(0);
               if(ret.list.length > 0){
                   for (var i=0;i<ret.list.length; i++){
                       ardo.list.push(ret.list[i]);
                   }
               }
           }else{
                ardo.p = ardo.p - 1;
                ArdoTip("我是有底线的！");
           }
       }else{
           ArdoTip(ret.msg);
       }
   }

   function openProblemReport(id){
       api.openWin({
           name: '案件详情',
           url: '../html/frame31.html',
           pageParam: {
               id: id
           }
       });
   }

</script>
</html>