MUI list(列表)

最新推荐文章于 2020-04-13 00:00:00 发布

秋城落叶

最新推荐文章于 2020-04-13 00:00:00 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_40861561/article/details/105217272

版权

本文介绍了MUI的列表组件用法，包括普通列表、自定义高亮颜色、添加导航箭头以及右侧数字角标等控件的实现，提供相关示例代码。

摘要由CSDN通过智能技术生成

1.普通列表

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

<ul class="mui-table-view">
    <li class="mui-table-view-cell">学习MUI</li>
    <li class="mui-table-view-cell">学习MUI</li>
    <li class="mui-table-view-cell">学习MUI</li>
</ul>

2.自定义列表高亮颜色

点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.mui-table-view-cell.mui-active即可，如下：

/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
    background-color: #0062CC;
}

3.右侧添加导航箭头

若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可，如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">学习MUI</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">学习MUI</a>
    </li>
    &