mui 之 列表

说明

列表是常用的UI控件，mui 封装的列表组件比较简单，只需要在ul节点上添加mui-table-view类、在li节点上添加mui-table-view-cell类即可

官方文档：https://dev.dcloud.net.cn/mui/ui/#listview

代码块：mlist

普通列表

<!-- 普通列表 -->
<ul class="mui-table-view">
    <li class="mui-table-view-cell">Python</li>
    <li class="mui-table-view-cell">Scala</li>
    <li class="mui-table-view-cell">Java</li>
</ul>

各类列表

<div class="mui-content-padded">
    <h5> 各类列表</h5>
</div>
<ul class="mui-table-view">

    <li class="mui-table-view-cell">
        <label>普通列表</label>
    </li>

    <li class="mui-table-view-cell"><a class="mui-navigate-right">带箭头列表</a></li>

    <li class="mui-table-view-cell mui-checkbox">
        <label>单选</label>
        <input name="checkbox" type="checkbox" checked>
    </li>

    <li class="mui-table-view-cell">
        <label>带数字角标</label>
        <span class="mui-badge mui-badge-primary">11</span>
    </li>

    <li class="mui-table-view-cell">
        <label>按钮</label>
        <button type="button" class="mui-btn mui-btn-blue">按钮</button>
    </li>

    <li class="mui-table-view-cell">
        <label>带开关</label>
        <div class="mui-switch mui-active mui-switch-blue">
            <div class="mui-switch-handle"></div>
        </div>
    </li>

    <li class="mui-table-view-cell">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="./images/qq.png">
            <div class="mui-media-body">
                <p>图文列表</p>
                <!-- 字超出范围用 ... 表示 -->
                <p class='mui-ellipsis'>详情详情详情详情详情详情详情详情详情详情详详情</p>
            </div>
        </a>
    </li>

</ul>

自定义列表点击的高亮

修改 .mui-table-view-cell.mui-active 的背景样式

<style type="text/css">
    /*点击变蓝色高亮*/
    .mui-table-view-cell.mui-active{
        background-color: #0062CC;
        color: white;
    }
</style>

<div class="mui-content-padded">
    <h5> 各类列表</h5>
</div>
<ul class="mui-table-view">
    <li class="mui-table-view-cell">普通列表</li>
</ul>