列表式布局，是移动端布局的常见布局。其内容从上往下排列，导航之间的跳转要回到初始点。层次展示清晰，视觉效果好，体验方便快捷。常用应用于各种设置页面。非常的美观。接下来由我给大家讲解一下MUI列表式布局的代码。
普通列表
.mui-table-view类，然后在li标签中加入.mui-table-view-cell类，非常的简单。
代码如下
|
<ul> <li>列表 1</li> <li>列表 2</li> <li>列表 3</li> </ul> |
效果图：
自定义列表高亮颜色
值得我们注意的一点是，我们重写css样式，一定要写在MUI.css的下方。不然我们的代码是不会生效的。
代码如下：
|
<style type="text/css"> .mui-table-view-cell.mui-active{ background-color: #2AC845; } </style> |
效果图：
右侧添加导航箭头
代码如下：
|
<ul> <li> <a>列表 1</a> </li> <li> <a>列表 2</a> </li> <li> <a>列表 3</a> </li> </ul> |
效果图：
图文列表
.mui-media：媒体类
.mui-media-object：媒体对象
.mui-media-body：媒体主体
.mui-pull-left/right：该类的作用是使图片左/右浮动。
代码如下：
|
ul> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="img/333.jpg"> <div> 这里是主标题 <p>这里是内容</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="img/222.jpg"> <div> 这里是主标题 <p>这里是内容</p> </div> </a> </li> <li class="mui-table-view-cell mui-media"> <a href="javascript:;"> <img class="mui-media-object mui-pull-left" src="img/111.jpg"> <div> 这里是主标题 <p>这里是内容</p> </div> </a> </li> </ul> |
效果图：
总结
列表式布局的代码简单易懂，我们需要知道是如何按照我们的需求来更改样式。即使代码简单，我们也不能忽视。只有明白了代码，我们才能将其利用。
END
主 编 | 张祯悦
责 编 | 王 宇
where2go 团队
标签：MUI,代码,布局,列表,效果图,mui,view
来源： https://blog.51cto.com/u_15281984/2957870
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。