APICloud開發者進階之路|【案例原始碼】簡單時間軸

阿新 • • 發佈：2020-09-12

基於業務上的需要，自己做了一個簡單的時間軸例子，網上找到色調,先放圖

因為想做透明頭部,但是win頁面開啟frm頁面後,會遮住win頁面的頭部,所以就取消了win頁面的header標籤,下面是win頁面的程式碼：

<!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">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript 
">
    apiready = function(){
        api.parseTapmode();
        var body_h = $api.offset($api.dom('body')).h;
        api.openFrame({
            name: 'merchant_order_details2_frm',
            url: 'merchant_order_details2_frm.html',
            bounces: false,
            rect: {
                x:  
0,
                y: 0,
                w: 'auto',
                h: 'auto'
            }
        })
    };
    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>
複製程式碼

frm頁面，先用aui寫了一個頭部導航條,然後建立了一個class名為container的div容器,scoll是滾動條容器,因為要給滾動容易一個高度,所以我在js裡面計算了螢幕高度減去頭部導航條的高度,對css理解不深,所以有不對的地方還望大佬指正。

<!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>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            background: -webkit-linear-gradient(30deg, #383B86, #D983AF);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(30deg, #383B86, #D983AF);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(30deg, #383B86, #D983AF);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(30deg, #383B86, #D983AF);
            /* 標準的語法（必須放在最後） */
        }

        #container {
            width: 100%;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .timeLine {
            width: 100%;
            display: -webkit-flex;
            display: flex;
            flex-direction: row;
        }

        .timeLineImg {
            width: 20%;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .timeLineLeft {
            height: 100%;
            width: 1px;
            border-left: 1px solid white;
        }

        .timeLineInfo {
            width: 80%;
        }

        .timeLineInfoTitle {
            font-size: 20px;
            color: white;
        }

        .timeLineInfoIntroduce {
            font-size: 16px;
            color: white;
        }

        .timeLineInfoTime {
            font-size: 12px;
            color: #CA92C4;
        }
        .scoll {
            overflow: auto;
            margin-top: 65px;
        }
</style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="padding-top:25px;background-color:rgba(0,0,0,0);position: fixed;">
        <a class="aui-pull-left">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">時間軸</div>
        <a class="aui-pull-right aui-btn aui-btn-outlined">
            <span class="aui-iconfont aui-icon-menu"></span>
        </a>
    </header>
    <div id="container">
        <div class="scoll">
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
          <div class="timeLine">
              <div class="timeLineImg">
                  <img src="../image/point.png">
                  <div class="timeLineLeft"></div>
              </div>
              <div class="timeLineInfo">
                  <div class="timeLineInfoTitle">狀態:已申請</div>
                  <div class="timeLineInfoIntroduce">在廣東廣州分撥中心進行裝車掃描，發往：四川成都分撥中心</div>
                  <div class="timeLineInfoTime">2018-11-18/週日 21:33:34</div>
              </div>
          </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        $api.css($api.dom(".scoll"),"height:"+(api.frameHeight - 65)+"px")
        api.parseTapmode();
    };
</script>

</html>
複製程式碼

APICloud開發者進階之路|【案例原始碼】簡單時間軸

基於業務上的需要，自己做了一個簡單的時間軸例子，網上找到色調,先放圖因為想做透明頭部,但是win頁面開啟frm頁面後,會遮住win頁面的頭部,所以就取消了win頁面的header標籤,下面是win頁面的程式碼：

APICloud開發者進階之路|【案例原始碼】js把年月日時間轉化成剛剛，幾分鐘前，幾小時前，幾天前

<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title></title>

APICloud開發者進階之路| JS利用H5的canvas操作微信瀏覽器上傳圖片方向旋轉

專案背景：微信公眾號，不想用微信JS-SDK 圖片上傳功能發現部分機型，微信內建瀏覽器，vant-upload元件選取圖片會發生旋轉解決方案：利用H5的canvas標籤操作圖片旋轉程式碼註釋不全，大概邏輯就是選圖片=》讀取檔案

APICloud開發者進階之路| WKWebView的使用介紹

在iOS系統中，WebView分為UIWebView和WKWebView，相比於UIWebView，WKWebView在效能和功能等方面有很大提升，具有Safari相同的JavaScript引擎，支援更多的HTML5特性，並且沒有點選事件延遲，滾動時也不會影響頁面渲染

Android高階進階之路【一】Android中View繪製流程淺析

前言一個View，從無到有會走三個流程，也就是老生常談的measure,layout,draw三流程;

Android高階進階之路【三】看完這篇再不會Android動畫框架，我跪搓衣板

Android動畫可作用於View/ViewGroup，Actvity，Fragment實現炫酷的互動效果。經過幾天的探究，搞清楚了各類動畫的使用和動畫的實現原理，在此記錄以下。

Android高階進階之路【四】一文讀懂 Handler 機制

前言做 Android 開發肯定離不開跟 Handler 打交道，它通常被我們用來做主執行緒與子執行緒之間的通訊工具，而 Handler 作為 Android 中訊息機制的重要一員也確實給我們的開發帶來了極大的便利。

Android高階進階之路【七】Android效能優化總結

安卓開發大軍浩浩蕩蕩，經過近十年的發展，Android技術優化日異月新，如今Android 9.0 已經發布，Android系統性能也已經非常流暢，可以在體驗上完全媲美iOS。

【API進階之路6】一個技術盲點，差點讓整個專案翻車

上次教了實習生一個方案之後，這小子跟運營妹子的關係是越走越近，時不時地撒把狗糧，在我司真正實現了研發運營一家親~（上回你沒看？戳上文劇情回顧：萬萬沒想到，一個技術方案幫實習生追到了運營妹子）

【API進階之路】老闆給我漲薪30%！如何通過SDK介面搞定千萬級流量直播

摘要：看我如何通過API Explorer 的SDK介面搞定千萬級流量直播。最近幾個月，我的變化其實還蠻大的，從一個被實習生“無視”的“前浪”，轉變成了不僅能夠解決技術問題還能解決業務問題（順手還

【API進階之路】因為不會建立雲伺服器，我被實習生擺了一道

摘要：9個步驟通過API建立雲伺服器。事情是這樣的，公司成立了一個新專案，要給專案建官網，並搭建一個web伺服器。按照我的習慣，搭建一個本地虛擬機器就好了，部署簡單方便還好配置，雲伺服器嘛，寫了10年程式碼，

【API進階之路】幫公司省下20萬調研費！如何巧用情感分析API實現使用者偏好調研

摘要：自從學習API後，彷彿解鎖了新技能，可別小看了一個小小的API介面，用好了都是能力無窮。這不，用情感分析API來做使用者偏好調研，沒想到這麼一個小創意給公司省了20萬調研費用。

【API進階之路】研發需求突增3倍，測試團隊集體鬧離職

摘要：最近研發的需求量漲了3倍，開發團隊拼命趕進度，可苦了測試團隊。本以為從一線研發轉管理後會清閒一些，但是沒想到，我還要充當救火隊員的角色。

【進階之路】Redis基礎知識兩篇就滿足（一）

導言大家好，我是南橘，一名練習時常兩年半的java練習生，這是我在部落格園的第一篇文章，當然，都是要從別處搬運過來的，不過以後新的文章也會在部落格園同步釋出，希望大家能多多支援^_^

【進階之路】Redis基礎知識兩篇就滿足（二）

導言大家好，我是南橘，一名練習時常兩年半的java練習生，這是我在部落格園的第二篇文章，當然，都是要從別處搬運過來的，不過以後新的文章也會在部落格園同步釋出，希望大家能多多支援^_^

【進階之路】演算法的時間複雜度與空間複雜度

大家好，我是練習java兩年半時間的南橘，從一名連java有幾種資料結構都不懂超級小白，到現在懂了一點點的進階小白，學到了不少的東西。知識越分享越值錢，我這段時間總結（包括從別的大佬那邊學習，引用）了一些平常

【進階之路】執行緒池配置與調優的一些高階選項（一）

這一篇的內容主要來自於《java併發程式設計實戰》，有一說一，看這種寫的很專業的書不是很輕鬆，也沒辦法直接提高多少開發的能力，但是卻能更加夯實基礎，就像玩war3，熟練的基本功並不能讓你快速地與對方拉開差距，

【進階之路】基於ShardingSphere的線上業務資料脫敏解決方案

因為某種原因，需要去考慮資料脫敏的問題，但是既不想因為脫敏而影響資料的操作性，又需要對一些敏感資訊進行可靠的保護。因此，正好解決了手頭問題的我就開始研究各種脫敏手段、尋求最適合目前現狀的脫敏解決方案。

【進階之路】併發程式設計（三）-非阻塞同步機制

導言這一篇的內容主要來自於《java併發程式設計實戰》，有一說一，看這種寫的很專業的書不是很輕鬆，也沒辦法直接提高多少開發的能力，但是卻能更加夯實基礎，就像玩war3，熟練的基本功並不能讓你快速地與對方拉開

【進階之路】深入理解Java虛擬機器的類載入機制（長文）

我們在參加面試的時候，經常被問到一些關於類載入機制的問題，也都會在面試之前準備的時候背好答案，但是我們是否有去深入瞭解什麼是類載入機制呢？這段時間因為一些事情在家看了些書，這次就和大家分享一些關於Java

APICloud開發者進階之路|【案例原始碼】簡單時間軸

相關推薦