专栏首页低代码开发APICloud开发者进阶之路|【案例源码】简单时间轴

APICloud开发者进阶之路|【案例源码】简单时间轴

基于业务上的需要,自己做了一个简单的时间轴例子,网上找到色调,先放图。

因为想做透明头部,但是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>
复制代码

原文链接:https://mp.weixin.qq.com/s/iaNpdnU0s9OxkVNQp6TwDA

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数字化运营助力App全生命周期管理

    据麦肯锡预测,到2030年,数字化将在中国创造高达45%的行业总收入。在企业运营核心由实体资产转变为数据洞察的背景下,多场景适用、敏捷交付、智能化、一站式的前瞻...

    APICloud
  • App的两条生命线:产品设计与营收模式

    工信部最新数据显示,截止到4月末,国内市场上可以监测到的app高达359万,净增8万款。Web的出现颠覆了传统传媒行业,app的快速发展也在不断的改变人们的生活...

    APICloud
  • 低代码驱动IT现代化的三种方式

    现代市场经济中所有的企业都有一个共同点。它们运营管理都在软件上运行,可以毫不夸张的说,选择适合的软件通常是企业之间保持竞争优势和陷入失败的重要因素。

    APICloud
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • Position定位

    CSS中position属性是比较常用的元素定位方案,position常用的取值有static、relative、absolute、fixed、sticky、i...

    WindrunnerMax
  • jQuery第二十一篇 scrollTop

    用户7873631
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • CSS旋转魔方

     想不想做一个3D魔方,把儿子的照片放进去,外面是你,里面是他。本人从业至今,自诩是动画机器人,苦心钻研各种动画,精通CSS3、Canvas等,不管你要做什么,...

    我不是费圆
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674

扫码关注云+社区

领取腾讯云代金券