使用layui timeline過程記錄：

layui官網時間線介紹比較少，可能是太簡單了，這里把時間線通過請求后臺數據。再自動填寫到對應區塊，進行了封裝；

代碼如下：

function timelineshow(url,json,div){$.ajax({url: url,type: "post",data: json,dataType: "json",success: function (res) {console.log(res);if(res.SUCCESS===true){var list = res.data;var uls = "<ul class=\"layui-timeline\">";var uls1 = "<ul>";var uls2 = "</ul>";var lis = "<li class=\"layui-timeline-item\">";var lis1 = "<li>";var lis2 = "</li>";var is = "<i class=\"layui-icon layui-timeline-axis\"></i>";var divs = "<div class=\"layui-timeline-content layui-text\">";var divs2 = "</div>";var h3s = "<h3 class=\"layui-timeline-title\">";var h3s2 = "</h3>";var ps = "<p>";var ps2 = "</p>";var br = "</br>";if(list.length>0){var content1 = "";content1 = content1+uls;for(var i=0; i<list.length; i++){var content2 = "";content2 = content2+lis+is+divs;if(list[i].time!=null&&list[i].time!=''){content2 = content2+h3s+createTime(list[i].time)+h3s2}if(list[i].content!=null&&list[i].content!=''){content2 = content2+ps+list[i].content+ps2;}if(list[i].ul!=null&&list[i].ul.length>0){var list2 = list[i].ul;content2 = content2+uls1;for(var j=0; j<list2.length; j++){if(list2[j].content!=null&&list2[j].content!=''){content2 = content2+lis1+list2[j].content+lis2;}}content2 = content2+uls2;}//可擴展content2 = content2 + divs2+lis2;content1 =content1+content2;}content1 = content1 +uls2;//再跟你想追加的代碼加到一起插入div中document.getElementById(div).innerHTML = content1;}}else if(res.SUCCESS===false){layer.msg(res.msg);}}}); }function createTime(v){var date = new Date(v);var y = date.getFullYear();var m = date.getMonth()+1;m = m<10?'0'+m:m;var d = date.getDate();d = d<10?("0"+d):d;var h = date.getHours();h = h<10?("0"+h):h;var ms = date.getMinutes();ms = ms<10?("0"+ms):ms;var s = date.getSeconds();s = s<10?("0"+s):s;var str = y+"-"+m+"-"+d+" "+h+":"+ms+":"+s;return str;}

?調用如下：

var url = "./json/timeline/dome1.js";
var json = {};
timelineshow(url,json,"div1");//url為請求數據地址；json為參數json字符串；打三個參數為時間線顯示位置標簽id

參數說明：

　　url:實際后臺請求地址；

　　json:請求參數；

　　第三個參數:時間線繪制點

數據響應形式：

{"SUCCESS": true,"data": [{"time": "2019-01-04 11:00:42","content":"這是一條測試內容","ul":[{"content":"子內容1"},{"content":"子內容1"}]}, {"time": 1546571007000,"content":"這是一條測試內容","ul":[{"content":"子內容1"},{"content":"子內容1"}]}, {"time": 1546571096000,"content":"這是一條測試內容"}, {"time": 1546571118000,"content":"這是一條測試內容"}, {"time": 1546571159000,"content":"這是一條測試內容"}, {"time": 1546571372000,"content":"這是一條測試內容"}, {"time": 1546571458000,"content":"這是一條測試內容"}, {"time": 1546571721000,"content":"這是一條測試內容"}, {"time": 1546572137000,"content":"這是一條測試內容"}],"msg": "查詢成功！" }

?參數說明：

　　“SUCCESS”：調用接口狀態反饋；

　　“data”:時間線內容

　　　　“time”:時間線時間;這里可以傳入時間戳形式；也可以傳入定義好的時間格式;如："2019-01-04 11:00:42"

　　　　“content”:內容

　　　　“url”:子內容

　　　　　　“content”:內容部分

　　“msg”:調用接口反饋信息；當“SUCCESS”為false時，會根據此字段進行提示信息

效果展示：

?

轉載于:https://www.cnblogs.com/zktww/p/10232179.html

總結

以上是生活随笔為你收集整理的layui timeline使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。