在mui的开发中有个坑,mui.plusReady在web上使用时是不会起作用的,只能在app上才行,所以推荐自己测试时使用mui.ready去写加载时的方法。

前端请求的返回格式为json,所以在后端对数据进行了包装处理,在返回后是一层叠一层。

success:function(data){
if(data.data.list.length !== 0){
var list = data.data.list;//提取返回的list数据
layui.use('laytpl', function(){//使用layui提供的laytpl模板
var temp= matterListScript.innerHTML;//向自己的script模板内填充
layui.laytpl(temp).render({list:list},function(html){
matterList.innerHTML = html;//将填充的script放进页面区间
});
});
}else{
mui.alert("暂时没有相关待处理事项","提示","我知道了",function () {
mui.openWindow({
url:"/app/index?sid=${param.sid}"
});
});
}
}

后面是使用layui的方式填充script模板

<script type="text/html" id="matterListScript">
<ul class="pjt-list" id="ulList">
{{# layui.each(d.list,function(index,obj){ }}
<li class="mui-table-view-cell mui-media" id="{{obj.id}}">
<h4 class="ove-title">{{obj.matterName}}</h4>
<span class="pjt-tip">待审核</span>
<div class="bom">
<p>编号:{{obj.matterNo}}</p>
<p style="text-align: right">{{obj.recordCreateTime}}</p>
</div>
</li>
{{# }); }}
</ul>
</script>

自己找的时候也是费了一点力气,开始用的template-web的模板,后面老大说项目之前有layui的填充模板,就又百度和看以前的代码进行修改了。

新人入坑还请多指教,谢谢各位大佬阅读。原文地址:https://www.cnblogs.com/lrz007/p/11341331.html

mui的app页面使用layui填充数据的更多相关文章

  1. springboot+layui实现PC端用户的增删改查 & 整合mui实现app端的自动登录和用户的上拉加载 & HBuilder打包app并在手机端下载安装

    springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和 ...

  2. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  3. 初入APP(结合mui框架进行页面搭建)

      前  言 博主最近在接触移动APP,学习了几个小技巧,和大家分享一下. 1. 状态栏设置 现在打开绝大多数APP,状态栏都是与APP一体,不仅美观,而且与整体协调.博主是个中度强迫症患者,顶部那个 ...

  4. Python Django CMDB项目实战之-2创建APP、建模(models.py)、数据库同步、高级URL、前端页面展示数据库中数据

    基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...

  5. 基于Html5 Plus + Vue + Mui 移动App开发(三)-文件操作(读取、保存、更新数据)

      随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...

  6. HTML5+中动态构建列表并填充数据

    部分代码参考demo----<历史上的今天>. 感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用. html部分: & ...

  7. mui开发app之联网应用传输数据

    手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...

  8. 基于Html5 Plus + Vue + Mui 移动App 开发(二)

    基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...

  9. ios&h5混合开发项目仿app页面跳转优化

    前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

随机推荐

  1. django基础知识之定义模型:

    定义模型 在模型中定义属性,会生成表中的字段 django根据属性的类型确定以下信息: 当前选择的数据库支持字段的类型 渲染管理表单时使用的默认html控件 在管理站点最低限度的验证 django会为 ...

  2. Hash碰撞概率

    计算Hash冲突的概率 虽然已经很多可以选择的Hash函数,但创建一个好的Hash函数仍然是一个活跃的研究领域.一些Hash函数是快的,一些是慢的,一些Hash值均匀地分布在值域上,一些不是.对于我们 ...

  3. 2019 Java 全栈工程师进阶路线图,一定要收藏

    技术更新日新月异,对于初入职场的同学来说,经常会困惑该往那个方向发展,这一点松哥是深有体会的. 我刚开始学习 Java 那会,最大的问题就是不知道该学什么,以及学习的顺序,我相信这也是很多初学者经常面 ...

  4. shell的用处到底大不大

    我曾在智联招聘等网站上搜寻有关shell脚本员的职位,与C++.JAVA等热门语言相比,冷清很多.看上去似乎招shell程序员的公司比较少.是不是公司不重视或者是很少用到shell这个东东呢?     ...

  5. .net持续集成cake篇之cake介绍及简单示例

    cake介绍 Cake 是.net平台下的一款自动化构建工具,可以完成对.net项目的编译,打包,运行单元测试,集成测试甚至发布项目等等.如果有些特征Cake没有实现,我们还可以很容易地通过扩展Cak ...

  6. 用Python玩数据-笔记整理-第一章

    第一个程序:print >>>print("Hallo World!") >>>Hallo World! mystring = "Ha ...

  7. 快速掌握mongoDB(四)—— C#驱动MongoDB用法演示

    前边我们已经使用mongo shell进行增删查改和聚合操作,这一篇简单介绍如何使用C#驱动MongoDB.C#驱动MongoDB的本质是将C#的操作代码转换为mongo shell,驱动的API也比 ...

  8. Spring 注解编程之 AnnotationMetadata

    在上篇文章 Spring 注解编程之模式注解 中我们讲到 Spring 模式注解底层原理,依靠 AnnotationMetadata 接口判断是否存在指定元注解. 这篇文章我们主要深入 Annotat ...

  9. sublime 如何安装插件实现高效输入,如何支持markdown 语法,并实时预览

    啊,一直想鼓捣markdown的语法,但是配置什么的有点麻烦.不过用起来的话,真心顺手.无需考虑格式与语法点来点去影响效率, 用心去搬砖,用脚修bug 一.初识 Package Control 首先, ...

  10. 线程锁,threadinglocal,线程池,生产者消费者模型

    1.线程锁 1.锁Lock(只能锁一次) import threading import time v = [] lock = threading.Lock() def func(arg): lock ...