其他分享
首页 > 其他分享> > MUI列表式布局

MUI列表式布局

作者：互联网

列表式布局，是移动端布局的常见布局。其内容从上往下排列，导航之间的跳转要回到初始点。层次展示清晰，视觉效果好，体验方便快捷。常用应用于各种设置页面。非常的美观。接下来由我给大家讲解一下MUI列表式布局的代码。

普通列表

.mui-table-view类，然后在li标签中加入.mui-table-view-cell类，非常的简单。

代码如下

<ul>

        <li>列表 1</li>

        <li>列表 2</li>

        <li>列表 3</li>

</ul>

效果图：

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

自定义列表高亮颜色

值得我们注意的一点是，我们重写css样式，一定要写在MUI.css的下方。不然我们的代码是不会生效的。

代码如下：

<style  type="text/css">

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

          background-color:  #2AC845;

       }

</style>

效果图：

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

右侧添加导航箭头

代码如下：

<ul>

        <li>

          <a>列表 1</a>

        </li>

        <li>

          <a>列表 2</a>

           </li>

        <li>

          <a>列表 3</a>

        </li>

</ul>

效果图：

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

图文列表

.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>

效果图：

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

总结

列表式布局的代码简单易懂，我们需要知道是如何按照我们的需求来更改样式。即使代码简单，我们也不能忽视。只有明白了代码，我们才能将其利用。

END

主  编   |   张祯悦

责  编   |   王   宇

 where2go 团队

           

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

标签：MUI,代码,布局,列表,效果图,mui,view
来源： https://blog.51cto.com/u_15281984/2957870