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. 【Codeforces】53D Physical Education (有点像冒泡)
  2. web移动端_移动端的轮播
  3. 程序猿充电的五本优质编程技术书
  4. 【Python基础教程】for循环用法详解
  5. 【译】Look-ahead Staking in Qtum - What does that even mean?
  6. 云效83行代码重构大师赛-码力全开,重启方舟
  7. python怎么设置代码执行时间_Python 2.x如何设置命令执行的超时时间实例
  8. android math类,GitHub - Zihin/MathModeling-Android
  9. node.js中exports与module.exports的区别分析
  10. Java程序员需要掌握哪些技能才能通过大公司的面试
  11. Spring Cloud微服务之搭建service_user模块(三)
  12. 如果手里有20万是放银行吃利息还是投资比较合适?
  13. c 语言程序设计形考任务一,C语言程序设计形考任务.doc
  14. ads1115与树莓派
  15. 1080Ti+windows7和1080Ti+windows10的区别
  16. 小程序开发------文件目录结构
  17. MS5358 适合用于像 DTV,DVR 和 AV 接收器的系统
  18. Postgres 数据存储位置
  19. Mac的环境配置的详细步骤
  20. 天行健君子以自强不息----宣言

热门文章

  1. Qt视频播放器界面Demo
  2. 如何在Internet Explorer 10中修改缓存行为
  3. foobar2000 常用插件搜集
  4. 千脑跳转页面下的安全分析
  5. 从零开始学android
  6. RepairImages\superboot-6410.bin
  7. SEO的艺术(原书第2版)
  8. 分享十个在线听歌、免费下载无损音乐的网站
  9. 这7款文本编辑器,程序员都应该知道
  10. win10系统键盘失灵怎么解决