MUI-LIST列表的基本使用

古城微笑少年丶 2022-08-10 00:36 204阅读 0赞

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

<ul class="mui-table-view">
    	<li class="mui-table-view-cell">Item 1</li>
    	<li class="mui-table-view-cell">Item 2</li>
    	<li class="mui-table-view-cell">Item 3</li>
    </ul>

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

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

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

<ul class="mui-table-view">
    	<li class="mui-table-view-cell">
    		<a class="mui-navigate-right">Item 1</a>
    	</li>
    	<li class="mui-table-view-cell">
    		<a class="mui-navigate-right">Item 2</a>
    	</li>
    	<li class="mui-table-view-cell">
    		<a class="mui-navigate-right">Item 3</a>
    	</li>
    </ul>

mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

<ul class="mui-table-view">
    	<li class="mui-table-view-cell">Item 1 
    		<span class="mui-badge mui-badge-primary">11</span>
    	</li>
    	<li class="mui-table-view-cell">Item 2 
    		<span class="mui-badge mui-badge-success">22</span>
    	</li>
    	<li class="mui-table-view-cell">Item 3 
    		<span class="mui-badge">33</span>
    	</li>
    </ul>

当然List也是可以自行定义的只要遵循结构即可。下面我们来看下运行的效果图：

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 python中列表的基本方法

python中列表的基本方法 1.使用方法sort() 对列表永久排序如果你有一个关于国家名称的列表，并要让其中国家名称按字母顺序排列。 li = [

Myth丶恋晨/ 2024年04月01日 17:21/ 0 赞/ 40 阅读

相关 Python中列表的基本操作

Python中列表的基本操作 1、增加列表中的元素 alist = ['Python', 'Java', 'JavaScript'] print(ali

﹏ヽ暗。殇╰゛Y/ 2024年04月01日 17:19/ 0 赞/ 55 阅读

相关 python列表的基本操作

Python对于列表元素的基本方法： 1）append()方法在列表末尾添加新的元素。 list.append(obj) 其中,list表示列表，obj表示

ゝ一世哀愁。/ 2022年12月17日 05:28/ 0 赞/ 141 阅读

相关 MUI-LIST列表的基本使用

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

古城微笑少年丶/ 2022年08月10日 00:36/ 0 赞/ 205 阅读

相关散列表的基本原理与实现

一、概述符号表是一种用于存储键值对（key-value pair）的数据结构，我们平常经常使用的数组也可以看做是一个特殊的符号表，数组中的“键”即为数组索引，值

女爷i/ 2022年06月18日 09:14/ 0 赞/ 145 阅读

相关列表的基本操作

性质 > 1, 元素可以重复 > 2, 可以存放多种类型 > list = \[“a”,”b”,”c”,1,4,5\] > 3, 排序 > list7 =

末蓝、/ 2022年06月06日 14:13/ 0 赞/ 188 阅读

相关 Redis基本操作-List列表

Redis基本操作-List列表基本介绍命令左右或者头尾压入元素左右或者头尾弹出元素

ゝ一世哀愁。/ 2022年01月11日 21:13/ 0 赞/ 292 阅读

相关 Python基本数据类型(列表)

基本数据类型三、列表列表(List)是一个有序的Python对象序列。 1.列表格式列表可以用一对中括号“\[ \]”生成，中间的元素用逗号“，”隔开：

旧城等待，/ 2021年12月24日 03:35/ 0 赞/ 462 阅读

相关 3.redis基本命令--列表

1.LPUSH key value \[value …\] 2.LPUSHX key value 将值 value 插入到列表 key 的表头，当且仅当 key 存

Dear 丶/ 2021年11月04日 09:26/ 0 赞/ 332 阅读

相关散列表(一).散列表基本内容介绍

　一说到散列表，大家脑子想到的词就是：Hashmap、key-value、查找速度快、增删速度快等等。确实，在我们平常的学习生活中，散列表是很常见、也是用的很多的数据结构...

你的名字/ 2021年01月10日 15:37/ 0 赞/ 777 阅读