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><!-- 引入好layer.js后,直接用即可 --><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模板 实现列表布局相关推荐

  1. 小熊的日记图文列表布局小程序模板

    简介: 小熊的日记图文列表布局小程序模板 网盘下载地址: http://kekewangLuo.net/aTJQAb3h6ej0 图片:

  2. 移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件

    移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件 原型展示及下载地址:h ...

  3. Axure通用web端元件库rplib文件格式+移动端app通用元件库rplib文件格式+电脑端动态可视化图表元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局

    作品介绍:Axure通用web端元件库rplib文件格式+移动端app通用元件库rplib文件格式+电脑端动态可视化图表元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布 ...

  4. 2023最新小熊的日记图文列表布局小程序模板源码

    正文: 小熊的日记图文列表布局小程序模板源码,有兴趣的自行去测试,其它的就没什么好介绍的了,注意是模板源码,没有后台,觉得不错的自行拿去修改. 程序: wwetho.lanzoui.com/is7lQ ...

  5. binarytreenode”使用 类 模板 需要 模板 参数列表_c++1117 模板核心知识(一)—— 函数模板...

    目录 定义函数模板 使用函数模板 两阶段翻译 Two-Phase Translation 模板的编译和链接问题 多模板参数 引入额外模板参数作为返回值类型 让编译器自己找出返回值类型 将返回值声明为两 ...

  6. 六十九、完成Vue项目城市选择页,路由配置,搜索框布局、列表布局、BetterScroll 的使用和字母表布局

    2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

  7. java读写word模板_Java操作Word模板插入列表

    Java操作Word模板插入列表 通过poi操作word,插入各种编号的列表,包括数字,字母,罗马字符,自定义任意字符.下面的示例就用了音乐符♬. 1.制作模板,插入列表使用语法*,模板内容为{{*n ...

  8. template(模板)的介绍以及使用方法

    引言: 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码. 在我们刚开始接触编程的时候,基本上新手都会自己编写一个交换函数(参数暂且为int),当我们的类型不是int而变成了do ...

  9. h5邮件的邮箱 支持_Coremail发布H5邮箱移动模板新版本,多项新功能让办公更便捷...

    近日,Coremail论客发布了邮箱客户端H5邮箱移动模板新版本Hxphone4.1.2,据Coremail产品经理介绍:此次更新的版本不仅对原有的协同模块功能.安全模块功能进行了更新完善,在收发信的 ...

  10. html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板

    本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案 模板地址 动动你的小手点颗star 样式适配 在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...

最新文章

  1. Mr Big [To be with you]
  2. 频频霸榜的Python,竟遭开发者嫌弃!
  3. Facebook曝至今最严重安全漏洞,超过5000万用户受影响
  4. shell 脚本安装Tomcat和java
  5. B2C(ecstore) 商城lnmp环境配置
  6. c#和VB混用出现的错误
  7. 微软正式发布 gRPC-Web for .NET
  8. fiddler如何filter_Fiddler工具的过滤功能介绍
  9. CSS 文本缩进text-indent属性
  10. 图解带你掌握`JVM`运行时核心内存区
  11. php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
  12. 【写作技巧】中文摘要及关键词的撰写
  13. java 9消失_java9增强的自动关闭资源
  14. mysql有rollup函数,Mysql,Oracle使用rollup函数完成行列统计
  15. Excel Spearman相关系数
  16. Java教程-Java 程序员们值得一看的好书推荐
  17. 鹏业安装算量软件项目管理功能的操作步骤
  18. 每天学一点英文:Espresso 20210811
  19. 关于Xilinx SDK工具的使用问题求解
  20. 红旗桌面4.0正式版最新使用方法和问题解答100例

热门文章

  1. BackTrack4 官方指南
  2. BackTrack 4 R2安装VMware tools
  3. 计算机二级的理论知识点,计算机二级必备知识点
  4. 所有Windows原版系统的下载地址
  5. arm-4-裸板开发
  6. 惠普HP Designjet 5100 打印机驱动
  7. 收集的一些discuz插件常用插件分享给大家了
  8. 计算机制作ppt教程,电脑制作ppt详细步骤_新手制作ppt详细步骤图文教程
  9. visualroute 很棒的一款工具
  10. 使用EasyExcel读取excel文件案例