美文网首页
H5 - aui-tab 实现顶部分页(doT加载列表数据)

H5 - aui-tab 实现顶部分页(doT加载列表数据)

作者: 西半球_ | 来源:发表于2020-04-23 09:22 被阅读0次

    demo 地址: https://github.com/iotjin/JhAPICloud_iOS

    效果图

    IMG_3327.PNG IMG_3328.PNG

    win代码

    <!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <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" />

    <style type="text/css">

    .aui-bar{
             background: #45C01A;
         }

         .aui-tab-item {
             width: 100%;
             height: 44px;
             line-height: 44px;
             position: relative;
             font-size: 0.7rem;
             text-align: center;
             color: #212121;
             margin-left: -1px;
             -webkit-box-flex: 1;
             box-flex: 1;
         }
         .aui-tab-item.aui-active {
             color: red;
             border-bottom: 0px solid #055a54;
         }

         .tab-line{
             height: 44px;
             line-height: 44px;
         }

    </style>

    </head>

    <body >


      <!-- <header class="aui-bar aui-bar-nav" id="header">
          <div class="aui-pull-left aui-btn">消息
          </div>
          <a class="aui-pull-right aui-btn">
              <i class="aui-iconfont aui-icon-gear"></I>
          </a>
      </header> -->

      <header class="aui-bar aui-bar-nav" id="header">
          <a class="aui-pull-left aui-btn" tapmode onclick="closeWin()">
              <span class="aui-iconfont aui-icon-left"></span>
          </a>
          <div class="aui-title">评价</div>
      </header>



      <div class="aui-tab" id="tab">
          <div class="aui-tab-item tapmode aui-active" id="a">未评价</div>
          <div class="tab-line">|</div>
          <div class="aui-tab-item tapmode" id="b">已评价</div>
      </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">

        apiready = function(){

        $api.fixStatusBar($api.byId('header'));


        // console.log($api.byId('header').offsetHeight);
        // console.log(api.safeArea.bottom);
        // console.log(api.winHeight);
        // console.log(api.frameHeight);


        fnOpenFindFrameGroup();

        var tab = new auiTab({
            element:document.getElementById("tab"),
            index:1,
            repeatClick:true

        },function(ret){

            var currentIndex = 0;

            if (ret.index ==1){
                currentIndex =0;
            }
            if (ret.index ==3){
                currentIndex =1;
            }
            api.setFrameGroupIndex({
                name : "tab_body",
                index : currentIndex,
                scroll : true
            });
        });





        }

      // 打开页面组，实现左右滑动切换效果
       function fnOpenFindFrameGroup() {

         api.openFrameGroup({
              name : 'tab_body',
              rect : {
                  x : 0,
                  y : $api.byId('header').offsetHeight+44,
                  w : 'auto',
                  h : api.winHeight - $api.byId('header').offsetHeight-44
              },
              frames : [{
                  name : 'top_tab_one',
                  url : 'top_tab_one.html',
              }, {
                  name : 'top_tab_two',
                  url : 'top_tab_two.html',
              }]
          }, function(ret, err) {
              var index = ret.index;
              $api.removeCls($api.byId('a'), 'aui-active');
              $api.removeCls($api.byId('b'), 'aui-active');
              if (index == 0) {
                  $api.addCls($api.byId('a'), 'aui-active');
              } else if (index == 1) {
                  $api.addCls($api.byId('b'), 'aui-active');
              }
          });

       }


      function fnCloseFindFrameGroup() {
        api.closeFrameGroup({
            name: 'tab_body'
        });
      }

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



    </script>

</html>

    one代码

    <!DOCTYPE HTML>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>分页one</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />

    <style type="text/css">

        body {
            height: 100%;
            background: #2e96d5;
        }

        .bgCell{
          margin: 10px;
          /*padding: 30px;*/
          padding: 10px;
          border:1px solid#2e96d5;
            background-color: white;
          /*background-color: #6ab494;*/
        }

        .flex-container {
            display: flex;
            justify-content: space-between;
            /*width: 400px;*/
            /*height: 50px;*/
            /*background-color: lightgrey;*/
        }

        .flex-item {
            /*background-color: cornflowerblue;*/
            /*width: 100px;
            height: 100px;*/
            /*margin: 5px;*/
            font-size: 15px;
        }

        .row2{
          margin-top: 10px;

        }

        .row2 img {
          display: inline;
          vertical-align: middle;
          width: 3rem;
          height: 3rem;
        }
        .row2 div {
          margin-left: 10px;
          display: inline;
          font-size: 15px;
        }
        .stateText{
          margin-right: 25px;
          display: inline;
          /*vertical-align:top;*/
          float:right;
        }




   .row3{
     margin-top: 10px;
     /*border: 1px solid red;*/
     display: flex;
     justify-content: space-between;
     vertical-align:middle;
     font-size: 12px;
     /*background-color: red;*/
   }
   .row3 div{
     height: 35px;
     line-height: 35px;
     vertical-align:middle;
     /*background: yellow;*/
   }

   .btn {
     background: transparent;
     border: 1px solid #737373;
     border-radius: 4px;
     width: 80px;
     height: 35px;
     line-height: 35px;
     text-align: center;
     font-size: 12px;
     color: #737373;
 }


 /*.box{
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.item{
  background: yellow;
}*/



    </style>

</head>

<body >

<label>一</label>


<section id="CellList">

</section>





</body>




<script id="template" type="text/x-dot-template">
    {{~it:value:index}}
    <div class="bgCell" tapmode="" onclick="clickItem( '{{=value}}' )">

    <div class="flex-container">
    <div class="flex-item">{{=value.title1}} </div>
    <div class="flex-item">{{=value.title2}} </div>
    </div>


    <div class="row2">
      <img class="img" src={{=value.img}}>
      <div>{{=value.time}} </div>
      <div class="stateText">{{=value.state}} </div>
     </div>


     <div class="row3">
       <div class="text">{{=value.text}}</div>
       <button class="btn" onclick="loginOut()">开始评价</button>
     </div>

     <!--  <div class="box">
        <span class="item">{{=value.title1}}</span>
        <span class="item">{{=value.title2}}</span>
      </div> -->

    </div>
  {{~}}
</script>



<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/doT.min.js"></script>

<script>
    apiready = function(){

        initData();
    }


    function initData() {

        var ALLData = {
            "img": "../image/bottombtn0102.png",
            "code": 1,
            "msg": "所有用户",
            "data": [{
                "id": 1,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "time": "2018-04-06 11:11:11",
                "state": "正常",
                "text": "ABC1234DSADAWWEQWEW",
            }, {
                "id": 2,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "time": "2018-04-06 11:11:11",
                "state": "正常",
                "text": "ABC1234DSADAWWEQWEW",
            },{
                "id": 3,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "time": "2018-04-06 11:11:11",
                "state": "正常",
                "text": "ABC1234DSADAWWEQWEW",
            },{
                "id": 4,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "time": "2018-04-06 11:11:11",
                "state": "正常",
                "text": "ABC1234DSADAWWEQWEW",
            }
          ]
        }



        // console.log("data---"+ JSON.stringify(ALLData["data"]));
        // console.log("data---"+ JSON.stringify(ALLData));

        var tempFn = doT.template($api.text($api.byId('template')));
        $api.html($api.byId('CellList'), tempFn(ALLData["data"]));
        api.parseTapmode();



    }


    function clickItem(item) {
      console.log("item");

      console.log(JSON.stringify(item));
      console.log(JSON.stringify(item.title2));
      console.log(item.title1);

    }


</script>

</html>

    two代码

    <!DOCTYPE HTML>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>分页two</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />

    <style type="text/css">

        body {
            height: 100%;
            background: #2e96d5;
        }

        .bgCell{
          margin: 10px;
          padding: 10px;
          border:1px solid#2e96d5;
          background-color: white;

        }

        .flex-container {
            display: flex;
            justify-content: space-between;
        }

        .flex-item {
            font-size: 15px;
        }



        .row2{
          margin-top: 10px;
        }
        .row2 img {
          display: inline;
          vertical-align: middle;
          width: 3rem;
          height: 3rem;
        }
        .row2 div {
          display: inline;
        }
        .Text{
          margin-left: 10px;
          font-size: 12px;
          min-width: 60%;
        }

        .line{
          margin-left: 30px;
          vertical-align: middle;
          line-height: 3rem;
        }
        .evaluateText{
          display: inline;
          font-size: 15px;
          float: right;
          vertical-align: middle;
          line-height: 3rem;
          margin-right: 15px;
        }






    </style>

</head>

<body >




<h2>二<h2>


  <section id="CellList">

  </section>


</body>



<script id="template" type="text/x-dot-template">
    {{~it:value:index}}
      <div class="bgCell">

      <div class="flex-container">
      <div class="flex-item">{{=value.title1}}</div>
      <div class="flex-item">{{=value.title2}} </div>
      </div>


      <div class="row2">
        <img class="img" src={{=value.img}}>
        <div class="Text" > {{=value.text}} </div>
        <div class="line">|</div>
        <div class="evaluateText">{{=value.evaluateText}} </div>
       </div>
      </div>

  {{~}}
</script>


<script type="text/javascript" src="../../../script/api.js"></script>
  <script type="text/javascript" src="../../../script/doT.min.js"></script>
<script>

    // let allData;
    // var index = 0;
    apiready = function(){

         initData();//本地假数据

    }

    function initData() {


        var ALLData = {
            "img": "../image/bottombtn0102.png",
            "code": 1,
            "msg": "所有用户",
            "data": [{
                "id": 1,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "text": "ABC1234DSADAWWEQWEW",
                "evaluateText": "满意",
            }, {
                "id": 2,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "text": "ABC1234DSADAWWEQWEW",
                "evaluateText": "满意",
            },{
                "id": 3,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "text": "ABC1234DSADAWWEQWEW",
                "evaluateText": "满意",
            },{
                "id": 4,
                "title1": "标题一标题一标题一",
                "title2": "标题二标题二标题二标题二",
                "img": "https://gitee.com/iotjh/Picture/raw/master/lufei.png",
                "text": "ABC1234DSADAWWEQWEW",
                "evaluateText": "满意",
            }
          ]
        }



        // console.log("data---"+ JSON.stringify(ALLData["data"]));
        // console.log("data---"+ JSON.stringify(ALLData));

        var tempFn = doT.template($api.text($api.byId('template')));
        $api.html($api.byId('CellList'), tempFn(ALLData["data"]));

        api.parseTapmode();


    }

</script>

</html>
![IMG_3327.PNG](https://img.haomeiwen.com/i12175332/c0530407f5d0cfa4.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    相关文章

      网友评论

          本文标题：H5 - aui-tab 实现顶部分页(doT加载列表数据)

          本文链接：https://www.haomeiwen.com/subject/ddxoihtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|H5 - aui-tab 实现顶部分页(doT加载列表数据)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！