• 组件
  • 布局与其它

长列表

最适用于显示同类的长列表数据类型 包括留言类长列表与普通列表组成的长列表

代码演示

长列表

留言长列表

2016-12-24 10:28:48
还有就诊卡号
慧医客服
2016-12-24 10:29:48
您好,网站实行实名制预约,如果预约时填写的信息和实际就诊时出示的信息不一致,是无法保证成功取号的。建议您取消订单,用正确的信息重新预约。

图文长列表

图文长列表一
图文长列表二
标题文本
辅助文字内容
12:30
标题文本
辅助文字内容
12:30
标题文本
辅助文字内容
12:30
标题文本
辅助文字内容
12:30
标题文本溢出怎么办,溢出截断溢出怎么办,溢出截断
辅助文字内容溢出怎么办,溢出截断溢出怎么办,溢出截断
12:30
标题文本溢出怎么办,溢出截断溢出怎么办,溢出截断
辅助文字内容溢出怎么办,溢出截断溢出怎么办,溢出截断
12:30
标题文本溢出怎么办,溢出截断溢出怎么办,溢出截断
辅助文字内容溢出怎么办,溢出截断溢出怎么办,溢出截断
12:30
标题文本溢出怎么办,溢出截断溢出怎么办,溢出截断
辅助文字内容溢出怎么办,溢出截断溢出怎么办,溢出截断
12:30
图文长列表三
标题文本
文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
12:30
标题文本
文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
12:30
标题文本
文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
标题文本
文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
标题文本
文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
标题文本
文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
长列表
<div class="listview">
	<div class="listview-item listview-item-middel ">
		<div class="listview-icon icon-hui-medical"></div>
		<div class="listview-content" >
			<div class="listview-title txt-insign">我</div>
			<div class="listview-brief ">2016-12-24 10:28:48</div>
			<div class="listview-msg ">还有就诊卡号</div>
		</div>
	</div>
	<div class="listview-item listview-item-middel ">
		<div class="listview-icon icon-default"></div>
		<div class="listview-content" >
			<div class="listview-title txt-prompt">慧医客服</div>
			<div class="listview-brief ">2016-12-24 10:29:48</div>
			<div class="listview-msg ">您好,网站实行实名制预约,如果预约时填写的信息和实际就诊时出示的信息不一致,是无法保证成功取号的。建议您取消订单,用正确的信息重新预约。</div>
		</div>
	</div>
</div>
图文长列表

与panel、g-space结合使用

<div class="panel g-space">
	<div class="panel-title">图文长列表</div>
	<div class="list-ord">
		<div class="list-item ">
			<span   class="icon-pic list-icon-sm"></span>
			<div class="list-content">
				<div class="list-title">带个小图标</div>
			</div>
		</div>
		<div class="list-item ">
			<a class="txt-arrowlink list-link-wrapper" >
				<span   class="icon-pic list-icon-sm "></span>
				<div class="list-content" >
					<div class="list-title ">小图标+箭头向右</div>
				</div>
			</a>
		</div>
		<div class="list-item ">
			<span  class="icon-pic list-icon"></span>
			<div class="list-content">
				<div class="list-title">标题文本</div>
				<div class="list-brief ">辅助文字内容</div>
			</div>
			<div class="list-extra" >12:30</div>
		</div>
		<div class="list-item list-nowrap">
			<span  class="icon-pic list-icon"></span>
			<div class="list-content">
				<div class="list-title txt-nowrap">标题文本溢出怎么办,溢出截断溢出怎么办,溢出截断</div>
				<div class="list-brief txt-nowrap">辅助文字内容溢出怎么办,溢出截断溢出怎么办,溢出截断</div>
			</div>
			<div class="list-extra" >12:30</div>
		</div>
		<div class="list-item ">
			<span  class="icon-pic list-icon-lg"></span>
			<div class="list-content">
				<div class="list-title">标题文本</div>
				<div class="list-brief ">文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</div>
			</div>
		</div>
		<div class="list-item list-item-footer">
			<div class="list-content">
				<a class="txt-prompt list-brief">加载更多</a>
			</div>
		</div>

	</div>
</div>