當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

H5 - template native模板实现列表布局

發(fā)布時間：2023/12/10 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5 - template native模板实现列表布局小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

demo 地址: https://github.com/iotjin/JhAPICloud_iOS

template git地址
template文檔

效果圖

代碼

<!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>圖文 template-native 模板</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;}</style></head><body><header class="aui-bar aui-bar-nav" id="aui-header"><a class="aui-btn aui-pull-left" tapmode onclick="closeWin()"><span class="aui-iconfont aui-icon-left"></span></a><div class="aui-title">template-native 模板</div><a class="aui-btn aui-pull-right"><span class="aui-iconfont aui-icon-plus"></span></a></header><label>Hello APP</label><section id="CellList"></section></body><script type="text/html" id="template"><%for(let i =0;i< data.length; i++){%><div class="bgCell"><ul class="aui-list aui-media-list"><li class="aui-list-item aui-list-item-middle"><div class="aui-media-list-item-inner"><div class="aui-list-item-media" style="width: 3rem;"><img src="../image/demo5.png" class="aui-img-round aui-list-img-sm"></div><div class="aui-list-item-inner aui-list-item-arrow"><div class="aui-list-item-text"><div class="aui-list-item-title aui-font-size-14"> <%=data[i].name%></div></div><%if (data[i].text=="text1"){ %><div>如果text==text1, 顯示這段話 </div><% }else if (data[i].text =="text2"){%><div>2222222</div><%} else{%><div><%=data[i].text%></div><%}%></div></div></li></ul></div><%}%></script><script type="text/javascript" src="../../../script/api.js"></script><script type="text/javascript" src="../../../lib/layui/layui.js"></script><script type="text/javascript" src="../../../script/template-native.js"></script><script type="text/javascript">apiready = function() {var header = $api.byId('aui-header');// 獲取頭部$api.fixStatusBar(header); // 處理ios兼容initData();};function closeWin(){api.closeWin({});}function initData() {var ALLData = {"img": "../image/bottombtn0102.png","code": 1,"msg": "所有用戶","data": [{"id": 1,"name": "name1","text": "text1","role": "admin","create_time": "2018-04-04T07:21:31.000Z"}, {"id": 2,"name": "name2","text": "text2","role": "user","create_time": "2018-04-04T07:23:24.000Z"}, {"id": 3,"name": "name3","text": "text3","role": "jie","create_time": "2018-04-04T07:23:24.000Z"}]}// console.log("data---"+ JSON.stringify(ALLData["data"]));// console.log("data---"+ JSON.stringify(ALLData));let html = template('template',{data:ALLData["data"]} );$api.html($api.byId('CellList'), html);api.parseTapmode();}</script></html>

總結

以上是生活随笔為你收集整理的H5 - template native模板实现列表布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

编程问答

H5 - template native模板 实现列表布局

demo 地址: https://github.com/iotjin/JhAPICloud_iOS

效果圖

代碼

總結

H5 - template native模板实现列表布局