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

头像
YonBuilder
    阅读 8 分钟

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

    image

    因为想做透明头部,但是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>  
复制代码
    javaandroidiosobjective-c小程序
    YonBuilder
    17 声望9 粉丝

    用友YonBuilder移动低代码开发平台，快速构建高性能多端应用

    « 上一篇
    12个前端开发必备开发的工具
    下一篇 »
    快速入门前端开发，你只需要这4步

    引用和评论

    推荐阅读
    头像
    用友BIP开发者生态亮相华为全联接大会

    YonBuilder阅读 559

    头像
    微信抢红包插件

    cyh213赞 37阅读 122.8k评论 184

    头像
    Bitmap 和 布隆过滤器傻傻分不清？你这不应该啊

    程序员小富赞 10阅读 4.8k评论 1

    头像
    卖不动了 iPhone 在美国市场销量或陷入停滞 ｜ Swift 周报 issue 63

    Swift社区赞 6阅读 331

    头像
    苹果自研调制解调器芯片受挫 ｜ Swift 周报 issue 38

    Swift社区赞 5阅读 1.1k

    头像
    苹果已提供新的设计资源 | Swift 周报 issue 32

    Swift社区赞 6阅读 1.8k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.9k评论 3

    0 条评论
    得票最新