H5 - aui-tab 實現頂部分頁(doT加載列表數據)

原創 西半球 2020-04-23 10:56

效果圖

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://upload-images.jianshu.io/upload_images/12175332-c0530407f5d0cfa4.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Page Lifecycle & Page Visibility 頁面週期和頁面可見性

沒有地球 太陽還是會繞。 今天填了上週的坑。爲明天挖一個。 項目裏用到了一個PageWillAppearEvent，是調用IOS或安卓的方法，看了一下IOS方法ViewWillAppear是當收到視圖在視窗將可見時的通知會呼叫的方法，此外

Root_030 2020-07-07 10:38:07

ODOO13 【H5+QWEB+插件の混合開發】圖片上傳及全屏輪播

ODOO13 【H5+QWEB+插件の混合開發】圖片上傳及全屏輪播

零妖大盗 2020-07-07 06:03:29

rem使用記錄

<script> window.onload = function(){ getRem(720,100) }; window.onresize = function(){ getRe

qq_37672347 2020-07-07 05:59:23

MUI 5+plus 獲取APP根目錄

/* 功能:獲取App根目錄 實例:app.getRoot() 當前訪問路徑：/page/index.html，結果：../ 當前訪問路徑：/page/child/index.html，結果：../.

China_Lzw 2020-07-06 17:26:12

H5筆記2-H5對History的新操作

在H5出生以前，我們可以通過window.history訪問瀏覽器的歷史記錄信息。 後退：window.history.back(); 前進：window.history.forward(); 後退、前進指定的步數window.

坛主叭叭叭 2020-07-06 15:59:02

【H5開發基礎】移動端1像素邊框問題的解決方案

【H5開發基礎】移動端1像素邊框問題的解決方案參考文章： （1）【H5開發基礎】移動端1像素邊框問題的解決方案 （2）https://www.cnblogs.com/jhli/p/6125095.html 備忘一下。

zhengxiuchen86 2020-07-06 12:05:05

h5 form 帶有文件的遞交 自動驗證 ajax

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script sr

java_陈序猿 2020-07-06 03:04:36

rgba與十六進制的相互轉換，以及rgba的校驗

1、將rgba顏色值轉換爲十六進制(rgb轉十六進制同理) RGBToHex(rgba){ let str = rgba.slice(5,rgba.length - 1), arry = str.split(','),

星雪之域 2020-07-04 14:10:57

頁面可見性改變事件：visibilitychange

1、PC瀏覽器上（以谷歌瀏覽器爲例） 刷新H5頁面，會觸發該事件，由於刷新導致該頁面消失時，會檢測到document.visibilityState === ‘hidden’ 切換頁面（包括切換離開和切換回來），導致頁面暫時不處

星雪之域 2020-07-04 14:10:57

【H5】1 - 新增屬性:placeholder、input 的 新type、contenteditable - 是否可編輯、draggable - 是否可拖拽

文章目錄1、placeholder - 用作提示信息2、input 的 新type3、contenteditable - 是否可編輯4、draggable - 是否可拖拽 總結： 只有placeholder \ contente

Eva3288 2020-07-04 04:35:07

vuiecli項目中用到了scss來書寫頁面

在剛剛完成的vuecli2.0項目中我們使用scss來對組件的樣式進行設計，由於項目比較棘手，好多代碼需要進行優化。 在scss中，我們常用的變量的使用情況。 1.scss中定義變量 $theme-color: #FCFDFD; $th

zhuaaaa3944210 2020-07-04 04:21:22

h5入門3--h5其他功能，API，文檔結構認識，

1.querySelector(“選擇塊”,"選擇範圍")方法，時document下的方法，根據制定規則返回找到的第一個符合規則的元素 2.querySelectorAll()方法：同上，返回所有匹配元素。 3.訪問json：windo

小白白要努力 2020-07-03 23:57:26

H5-- （功能）App內嵌h5網頁實現芝麻認證的接入

1、需求：由於高貴的IOS提審時不能出現支付寶相關字眼及相關SDK，所以我們app芝麻認證只有通過內嵌H5頁面實現 2、分析：通過調研 “芝麻認證”官方技術文檔 ，接入芝麻認證的流程如下圖（圖片來自官方文檔）： 要想完成這個功能，需要業

无缘浪子党 2020-07-03 13:47:49

H5和Android ios交互

1. 判斷手機是安卓或者ios方法 1.1 添加判斷機型方法（適用於Android和ios調用方法不一樣） // checkDeciveTyoe.js function checkDevice() { // js判斷是否是蘋果

清阿哥、 2020-07-03 03:50:04

Web APP、Hybrid APP、Native APP對比

1. 介紹 Web APP（網頁應用）是指基於Web的系統和應用，其作用是向廣大的最終用戶發佈一組複雜的內容和功能。目前多采用H5標準開發。在使用上的具體表現是，手機瀏覽器點擊進入，會有一些應用的小圖標，這些小圖標在點擊後，在瀏覽器里加載

Fantasy丶Lin 2020-07-03 00:22:58