MUI-LIST列表的基本使用

古城微笑少年丶 2022-08-10 00:36 238阅读 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 条评论，238人围观）

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

相关阅读

相关 Python初学者：列表推导式的基本使用示例

列表推导式是Python中一种简洁的创建新列表的方式。它基于一个或多个现有列表，通过简单的一行代码生成新列表。下面是一些基本的使用示例： 1. 从已有的数字列表中生成平方

怼烎@/ 2024年12月14日 05:54/ 0 赞/ 15 阅读

相关 python中列表的基本方法

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

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

相关 Python中列表的基本操作

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

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

相关 python列表基本操作｜切片使用

列表切片 list = \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\] 列表中元素对应的位置从左往右：第一个为0 从右往左：第一个为-

野性酷女/ 2023年07月23日 06:56/ 0 赞/ 22 阅读

相关 python列表的基本操作

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

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

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

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

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

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

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

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

相关列表的基本操作

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

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

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

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

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

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

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

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