8MUI – list(列表/图文列表)

8MUI – list(列表/图文列表)

吵蔽咸坚响勉祟试汉唇莆侩矗

参考文档

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

8MUI - list(列表/图文列表)第1张

8MUI - list(列表/图文列表)第2张

8MUI - list(列表/图文列表)第3张

8MUI - list(列表/图文列表)第4张


实际操作

1.普通列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">轮播组件</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--如果界面中有多个元素,建议使用div包裹起来,这里只有列表,可以不用div包裹-->
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell">项目1</li>
		    <li class="mui-table-view-cell">项目2</li>
		    <li class="mui-table-view-cell">项目3</li>
		    <li class="mui-table-view-cell">项目4</li>
		    
		</ul>
	</div>
</body>
</html>

执行:

8MUI - list(列表/图文列表)第5张

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">轮播组件</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--如果界面中有多个元素,建议使用div包裹起来,这里只有列表,可以不用div包裹-->
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell"><a class="mui-navigate-right">项目1</a></li>
		    <li class="mui-table-view-cell"><a class="mui-navigate-right">项目2</a></li>
		    <li class="mui-table-view-cell">项目3</li>
		    <li class="mui-table-view-cell">项目4</li>
		    
		</ul>
	</div>
</body>
</html>

执行:

8MUI - list(列表/图文列表)第6张


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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">轮播组件</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<!--如果界面中有多个元素,建议使用div包裹起来,这里只有列表,可以不用div包裹-->
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell">项目1<span class="mui-badge mui-badge-primary">11</span></li>
		    <li class="mui-table-view-cell">项目2<span class="mui-badge mui-badge-success">22</span></li>
		    <li class="mui-table-view-cell">项目3<span class="mui-badge">33</span></li>
		</ul>
	</div>
</body>
</html>

执行:

8MUI - list(列表/图文列表)第7张


2.图文列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">轮播组件</h1>
	</header>
	<!--头部结束-->
	<!--主体-->
	<div class="mui-content">
		<ul class="mui-table-view">
  			<li class="mui-table-view-cell mui-media">
  				<a href="">
  					<!--图片左浮动-->
  					<img class="mui-media-object mui-pull-left" src="images/1.jpg">
  					<div class="mui-media-body">
			                         幸福
			          <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
			        </div>
  				</a>
  			</li>
  			<li class="mui-table-view-cell mui-media">
  				<a href="">
  					<!--图片左浮动-->
  					<img class="mui-media-object mui-pull-left" src="images/1.jpg">
  					<div class="mui-media-body">
			                         幸福
			          <p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
			        </div>
  				</a>
  			</li>
  		</ul>
	</div>
</body>
</html>

执行:

8MUI - list(列表/图文列表)第8张


伞济千担签熬抵滤沉垛既处恋