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

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

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

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

  1. <script type="text/html" id="matterListScript">
  2. <ul class="pjt-list" id="ulList">
  3. {{# layui.each(d.list,function(index,obj){ }}
  4. <li class="mui-table-view-cell mui-media" id="{{obj.id}}">
  5. <h4 class="ove-title">{{obj.matterName}}</h4>
  6. <span class="pjt-tip">待审核</span>
  7. <div class="bom">
  8. <p>编号:{{obj.matterNo}}</p>
  9. <p style="text-align: right">{{obj.recordCreateTime}}</p>
  10. </div>
  11. </li>
  12. {{# }); }}
  13. </ul>
  14. </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. Elasticsearch实战总结

    上手elasticsearch有段时间了,主要以应用为主,未做深入的研究,下面就简单的日常作个简单的总结,做个记录. 版本问题 es版本繁杂,让首次使用的人无从下手.常见的有2+.5+版本,最新版已达 ...

  2. Docker笔记(五):整一个自己的镜像

    原文地址:http://blog.jboost.cn/2019/07/17/docerk-5.html 获取镜像的途径有两个,一是从镜像仓库获取,如官方的Docker Hub,二是自定义.上文已经介绍 ...

  3. STM32F072从零配置工程-实现delay功能

    因为是使用SysTick来作为延时时钟,因此在这里给出SysTick时钟的寄存器: CTRL:SysTick控制及状态寄存器 位段 名称 类型 复位值 描述 16 COUNTFLAG R/W 0 如果 ...

  4. 【题解】危险的工作-C++

    Description 给出一个数字N,N<=11.代表有N个人分担N个危险的工作. 每个人对应每个工作,有个危险值 每个人担任其中一项,问每个人危险值相加,最小值是多少. Input 第一行给 ...

  5. 从微信小程序开发者工具源码看实现原理(二)- - 小程序技术实现

    wxml与wxss的转换 1.wxml使用wcc转换 2.wxss使用wcsc转换 开发者工具主入口 视图层页面的实现 视图层页面实现技术细节 视图层快速打开原理 视图层新打开页面流程 业务逻辑层页面 ...

  6. Excel催化剂开源第39波-json字符串解释的超能类库

    对一般VBA开发群体来说,处理json.xml结构的数据源,在VB6的世界里,是一件非常不容易的事情,隐约记得当年自己从哪里找到了一个使用字典实现的json解释的函数,实在非常稀有. 在.Net的世界 ...

  7. html+css-->background-img(背景图的设置)

    背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉)    1.inherit:从父元素继承属性设置    2.background-repeat:平铺(在图片大小小于元素尺寸时 ...

  8. 深入理解Java中的锁(一)

    Java中锁的概念 自旋锁 : 是指当一个线程在获取锁的时候,如果锁已经被其他线程获取,那么该线程将循环等待,然后不断判断锁是否能够被成功获取,直到获取到锁才会退出循环. 乐观锁 : 假定没有冲突,在 ...

  9. 通信模型socket

    I/O的概念 操作系统的分为socket的I/O还有用户界面的输入输出,一般一个输入操作分为两个不同的阶段,1)等待数据准备好:2)从内核向进程复制数据 从理论上来讲,阻塞I/O.非阻塞I/O.复用I ...

  10. 基于ZK的 Dubbo-admin 与 Dubbo-monitor 搭建

    背景 最近项目中使用了 dubbo 在实现服务注册和发现,需要实现对服务提供者和调用者的监控,之前有研究过基于 redis作为注册中心的监控平台,不过本文基于 zk 作为注册中心,进行 dubbo-a ...