详细操作见代码：

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link href="css/mui.min.css" rel="stylesheet" />

        <style type="text/css">

            /*点击时背景和字体颜色设置一个过渡的效果*/

            .mui-table-view-cell{transition:background .5s,color .6s;}

            /*给标签被点击时产生一个效果*/

            .mui-table-view-cell.mui-active{

                background: red;

                 color: blue;

            }

        </style>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title">列表</h1>

        </header>

        <div class="mui-content">

            <h5 class="mui-content-padded">普通的列表</h5>

            <div class="mui-card">

                <!--

                mui-table-view    :父级

                mui-table-view-cell：子级

                -->

                <ul class="mui-table-view">

                    <li class="mui-table-view-cell">项目经理</li>

                    <li class="mui-table-view-cell">产品经理</li>

                    <li class="mui-table-view-cell">技术总监</li>

                </ul>

            </div>

            <h5 class="mui-content-padded">带箭头的列表</h5>

            <div class="mui-card">

                <ul class="mui-table-view">

                    <li class="mui-table-view-cell"><a class="mui-navigate-right" href="">java</a></li>

                    <li class="mui-table-view-cell"><a class="mui-navigate-right" href="">python</a></li>

                    <li class="mui-table-view-cell"><a class="mui-navigate-right" href="">php</a></li>

                </ul>

            </div>

             <h5 class="mui-content-padded">带数字角标的列表</h5>

            <div class="mui-card">

                <ul class="mui-table-view">

                    <li class="mui-table-view-cell">鞋子<span class="mui-badge mui-badge-blue"></span></li>

                    <li class="mui-table-view-cell">包包<span class="mui-badge mui-badge-red"></span></li>

                    <li class="mui-table-view-cell">衣服<span class="mui-badge mui-badge-warning"></span></li>

                </ul>

            </div>

             <h5 class="mui-content-padded">带数字角标+箭头的列表</h5>

            <div class="mui-card">

                <ul class="mui-table-view">

                    <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">鞋子<span class="mui-badge mui-badge-blue"></span></a></li>

                    <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">包包<span class="mui-badge mui-badge-red"></span></a></li>

                    <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">衣服<span class="mui-badge mui-badge-warning"></span></a></li>

                </ul>

            </div>

            <h5 class="mui-content-padded">带input的列表</h5>

            <div class="mui-card">

                <ul class="mui-table-view">

                    <li class="mui-table-view-cell">

                        学校

                        <button class="mui-btn mui-btn-warning">正确</button>

                    </li>

                    <li class="mui-table-view-cell">

                        操场

                        <!--开关-->

                        <div class="mui-switch mui-active mui-switch-blue">

                                <div class="mui-switch-handle"></div>

                            </div>

                    </li>

                    <!--input单选框-->

                    <li class="mui-table-view-cell mui-radio">

                        单选框

                        <input type="radio" name="" id="" value="" />

                    </li>

                    <!--input多选框-->

                    <li class="mui-table-view-cell mui-checkbox">

                        多选框

                        <input type="checkbox" />

                    </li>

                    <li class="mui-table-view-cell mui-checkbox">

                        多选框

                        <input type="checkbox" />

                    </li>

                    <li class="mui-table-view-cell mui-checkbox">

                        多选框

                        <input type="checkbox" />

                    </li>

                </ul>

            </div>

            <h5 class="mui-content-padded">三行列表</h5>

            <div class="mui-table-view">

                <div class="mui-table-view-cell">

                    <div class="mui-table">

                        <div class="mui-table-cell mui-col-xs-10">

                            <h4 class="mui-ellipsis">努力了的才叫梦想，不努力的就是空想！如果你一直空想的话，无论看多少正能量语录，也赶不走满满的负能量！你还是原地踏步的你，一直在看别人进步。</h4>

                            <h5 class="mui-h5">作者：L某人</h5>

                            <h6 class="mui-h6 mui-ellipsis-3">人自己就是一面镜子，你以什么样的态度对待世界，世界就会呈现给你什么样的景象。我们应该学会珍惜，生活因珍惜而有意义，生活因懂得珍惜而完美、精彩。</h6>

                            <div class="mui-table-cell mui-col-xs-2">

                                <h5>:</h5>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="mui-table-view-cell">

                    <div class="mui-table">

                        <!--

                            mui-table:表示调用栅格系统（父级）

                            （子级）mui-col-xs-：表示占栅格系统的几分（12分制，xs表示在最小屏幕上，sm表示在中等屏幕上时）

                            mui-ellipsis：表示显示一行溢出隐藏

                            mui-ellipsis-：表示显示4行溢出隐藏

                            mui-navigate-right：导航镜头a标签显示

                        -->

                        <div class="mui-table-cell mui-col-xs-10">

                            <h4 class="mui-ellipsis">努力了的才叫梦想，不努力的就是空想！如果你一直空想的话，无论看多少正能量语录，也赶不走满满的负能量！你还是原地踏步的你，一直在看别人进步。</h4>

                            <h5 class="mui-h5">作者：L某人</h5>

                            <h6 class="mui-h6 mui-ellipsis-3">人自己就是一面镜子，你以什么样的态度对待世界，世界就会呈现给你什么样的景象。我们应该学会珍惜，生活因珍惜而有意义，生活因懂得珍惜而完美、精彩。</h6>

                            <div class="mui-table-cell mui-col-xs-2">

                                <h5>:</h5>

                            </div>

                        </div>

                    </div>

                </div>

                    <div class="mui-table-view-cell">

                        <a href="" class="mui-navigate-right">

                    <div class="mui-table">

                        <div class="mui-table-cell mui-col-xs-10">

                            <h4 class="mui-ellipsis">努力了的才叫梦想，不努力的就是空想！如果你一直空想的话，无论看多少正能量语录，也赶不走满满的负能量！你还是原地踏步的你，一直在看别人进步。</h4>

                            <h5 class="mui-h5">作者：L某人</h5>

                            <h6 class="mui-h6 mui-ellipsis">人自己就是一面镜子，你以什么样的态度对待世界，世界就会呈现给你什么样的景象。我们应该学会珍惜，生活因珍惜而有意义，生活因懂得珍惜而完美、精彩。</h6>

                            <div class="mui-table-cell mui-col-xs-2">

                                <h5>:</h5>

                            </div>

                        </div>

                    </div>

                    </a>

                </div>

                <h5 class="mui-content-padded">二级列表(折叠的效果)</h5>

                <div class="nui-card">

                    <!--

                        一级table-view——》table-view-cell

                        mui-collapse:产生一个折叠的效果

                    -->

                    <div class="mui-table-view">

                        <div class="mui-table-view-cell mui-collapse">

                            <a href="" class="mui-navigate-right">课程列表</a>

                            <!--

                                二级table-view——》table-view-cell

                            -->

                            <div class="mui-table-view">

                                <div class="mui-table-view-cell">

                                    实习<span class="mui-navigate-right"></span>

                                </div>

                                <div class="mui-table-view-cell">

                                    产品经理<span class="mui-badge mui-badge-danger"></span>

                                </div>

                                <div class="mui-table-view-cell">

                                    项目策划<span class="mui-navigate-right"></span>

                                </div>

                                <div class="mui-table-view-cell">

                                    技术支持<span class="mui-badge mui-badge-danger"></span>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <h5 class="mui-content-padded">图文列表</h5>

                <div class="mui-table-view">

                    <!--

                        mui-media:媒体图文

                        mui-media-object：设置为媒体对象

                        mui-pull-left：表示将媒体对象左悬浮,mui-pull-right：表示向右悬浮

                        mui-media-body：媒体摘要信息栏

                    -->

                    <div class="mui-table-view-cell mui-media">

                        <img class="mui-media-object mui-pull-left" src="data:image/0_2.jpg"/>

                        <!--设置文字描述标题-->

                        <div class="mui-media-body">

                            蓝天白云，晴空万里

                            <p class="mui-6 mui-ellipsis">这里是摘要，老虎会撒娇，这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕</p>

                        </div>

                    </div>

                    <div class="mui-table-view-cell mui-media">

                        <img class="mui-media-object mui-pull-right" src="data:image/0_2.jpg"/>

                        <!--设置文字描述标题-->

                        <div class="mui-media-body">

                            蓝天白云，晴空万里

                            <p class="mui-6 mui-ellipsis">这里是摘要，老虎会撒娇，这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕这里是摘要，老虎会撒娇，可怕可怕</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

            mui.init()

        </script>

    </body>

</html>

具体效果如下：

mui列表系列的更多相关文章

  1. mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除)

    mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除) 2018-06-19更新显示样式

  2. mui列表跳转到详情页优化方案

    原理 因为列表页到详情页是多对一的形式,即列表页的多条数据列表对应的是一个详情页,只是数据不同而:因此,可以在加载列表页时预加载详情页,即创建一个详情页的webview,但是不显示出来,点击列表的时候 ...

  3. MUI 列表页面绑定接口数据

    1.我们先看效果 2.功能分析 主要分为3步 数据初始化 下拉刷新 上拉加载 接口数据示例: { "List": [ { "Id": 9, "Orde ...

  4. mui初级入门教程（六）— 模板页面实现原理及多端适配指南

    文章来源:小青年原创发布时间:2016-07-26关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github.io. ...

  5. mui scrollTo到指定位置,出现空白页及拉不动的问题解决

    使用方式简介 mui 列表页使用的是 mui的插件实现的上拉加载下拉刷新,但是从详情页回到列表页时 不能回到之前的位置.所以想到了使用缓存. 第一次和第二次的试验是失败的.失败后,就想用其他办法来解决 ...

  6. mui初级入门教程（一）— 小白入手mui的学习路线

    文章来源:小青年原创发布时间:2016-05-15关键词:mui,html5+转载需标注本文原始地址:http://zhaomenghuan.github.io/#!/blog/20160515 写在 ...

  7. python 学习笔记十二 html基础（进阶篇）

    HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.网页文件本身 是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览 ...

  8. Django 学习笔记（四）模板变量

    关于Django模板变量官方网址:https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.传入普通变量 在hello/Hell ...

  9. HTML基础-------HTML标签(2)

    HTML标签(2) a标签(容器级单标签) 语义:跳转到指定的连接 属性 列表系列 1.无序列表 该列表由两部分组成:ul标签嵌套li标签(ul标签是典型的容器级标签) 图示: 2.有序列表 该列表由 ...

随机推荐

  1. bat 复制文件夹，文件名递增 等操作

    句尾无';' @echo off : 回显,使命令不在dos中一行一行输出 pause : 暂停,以便看到输出结果 变量 %% 与 % % : https://zhidao.baidu.com/que ...

  2. fcntl F_SETFL

    F_SETFL file set flag F_SETFL命令允许更改的标志有O_APPEND,O_NONBLOCK,O_NOATIME,O_DIRECT,O_ASYNC 这个操作修改文件状态标记适用 ...

  3. php xml操作

    <?php if(!defined('DEDEINC')) { exit("Request Error!"); } function lib_videotag(&$c ...

  4. go 方法

    go 方法 Golang中的任何自定义类型,都可以有方法,而不仅仅是struct. 定义:func (recevier type) methodName(参数列表)(返回值列表){} 方法的访问控制, ...

  5. cmd命令对java程序进行编译时出现：编码GBK的不可映射字符

    原因:由于JDK是国际版的,在编译的时候,如果我们没有用-encoding参数指定JAVA源程序的编码格式,则java.exe首先获得我们才做系统默认采用的编码格式,也即在编译JAVA程序时,若我们不 ...

  6. MyBatis-注解方式整合SSM

    Spring.Spring MVC.MyBatis 整合 一.依赖 <?xml version="1.0" encoding="UTF-8"?> & ...

  7. Linux记录-监控系统开发

    需求:使用shell定制各种个性化告警工具,但需要统一化管理.规范化管理.思路:指定一个脚本包,包含主程序.子程序.配置文件.邮件引擎.输出日志等.主程序:作为整个脚本的入口,是整个系统的命脉.配置文 ...

  8. Web API中的返回值类型

    WebApi中的返回值类型大致可分为四种: Void/ IHttpActionResult/ HttpResponseMessage /自定义类型 一.Void void申明方法没有返回值,执行成功后 ...

  9. 【英文文档】 Installing Go from source Go语言官方编译指南 2019.02.27

    Introduction Go is an open source project, distributed under a BSD-style license. This document expl ...

  10. linux xargs【转】

    -i -I 参数区别 http://man.linuxde.net/xargs 它们都是用来作参数扩展替换的,以下两句代码其实效果一样 cat arg.txt|xargs -i sh sk.sh -p ...