列表内容 是 jQuery Mobile Listview 的核心展示方式，支持 多行文本、缩略图、图标、计数器、描述、分隔线 等丰富结构，完美用于 联系人、消息、商品、设置项 等场景。
重点：一个 <li> 可包含多层结构，无需额外 JS 即可自动美化！
1. 列表项内容结构速览
<li>
<a href="#">
<!-- 缩略图（左） -->
<img src="avatar.jpg" class="ui-li-thumb">
<!-- 主内容 -->
<h2>主标题（大字）</h2>
<p>副标题描述（小字）</p>
<p class="ui-li-aside">右侧内容（时间/状态）</p>
<!-- 计数器（右上角） -->
<span class="ui-li-count">99</span>
</a>
</li>
| 元素 | 类名 | 说明 |
|---|
<img> | ui-li-thumb | 缩略图（左边） |
<h2> | — | 主标题（粗体大字） |
<p> | — | 描述文字（小字） |
<p> | ui-li-aside | 右侧内容（时间、状态） |
<span> | ui-li-count | 未读计数（圆形角标） |
2. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 列表内容</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-li-thumb { width: 60px; height: 60px; border-radius: 50%; }
.ui-li-aside { font-weight: bold; color: #666; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>列表内容示例</h1>
</div>
<div data-role="main" class="ui-content">
<!-- 1. 联系人列表（缩略图 + 描述） -->
<h3>联系人</h3>
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="搜索联系人">
<li>
<a href="#">
<img src="https://picsum.photos/80/80?random=1" class="ui-li-thumb">
<h2>比利时用户</h2>
<p>在线</p>
<p class="ui-li-aside">03:06</p>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/80/80?random=2" class="ui-li-thumb">
<h2>张伟</h2>
<p>最后活跃：2小时前</p>
<p class="ui-li-aside">昨天</p>
</a>
</li>
</ul>
<!-- 2. 消息列表（计数 + 右侧时间） -->
<h3>消息中心</h3>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">今天</li>
<li>
<a href="#">
<img src="https://picsum.photos/80/80?random=3" class="ui-li-thumb">
<h2>系统通知</h2>
<p>您的账户已在新设备登录</p>
<p class="ui-li-aside">03:05</p>
<span class="ui-li-count">1</span>
</a>
</li>
<li>
<a href="#">
<h2>订单 #12345</h2>
<p>您的包裹已发出，预计明天到达</p>
<p class="ui-li-aside">02:50</p>
<span class="ui-li-count" style="background:#f33;">3</span>
</a>
</li>
<li data-role="list-divider">昨天</li>
<li>
<a href="#">
<h2>支付宝</h2>
<p>您有一笔退款已到账 €15.00</p>
<p class="ui-li-aside">11-16</p>
</a>
</li>
</ul>
<!-- 3. 商品列表（缩略图 + 价格） -->
<h3>热销商品</h3>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="https://picsum.photos/80/80?random=4" class="ui-li-thumb">
<h2>iPhone 16</h2>
<p>全新未拆封，官方渠道</p>
<p class="ui-li-aside">€999</p>
<span class="ui-li-count">库存 5</span>
</a>
</li>
<li>
/../../../../a href="#">
<img src="https://picsum.photos/80/80?random=5" class="ui-li-thumb">
<h2>AirPods Pro</h2>
<p>降噪神器，音质超赞</p>
<p class="ui-li-aside">€179</p>
</a>
</li>
</ul>
<!-- 4. 用户信息（无链接） -->
<h3>个人资料</h3>
<ul data-role="listview" data-inset="true">
<li>
<h2>国家</h2>
<p class="ui-li-aside">比利时 (BE)</p>
</li>
<li>
<h2>当前时间</h2>
<p class="ui-li-aside">2025年11月17日 03:06（CET）</p>
</li>
<li>
<h2>语言</h2>
<p class="ui-li-aside">中文</p>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
</body>
</html>
3. 内容元素详解
| 元素 | 推荐用法 | 示例 |
|---|
ui-li-thumb | 左边圆形头像 | <img class="ui-li-thumb"> |
<h2> | 主标题 | <h2>用户名</h2> |
<p> | 描述文字 | <p>最后活跃：1小时前</p> |
ui-li-aside | 右侧对齐 | <p class="ui-li-aside">03:06</p> |
ui-li-count | 计数角标 | <span class="ui-li-count">99</span> |
4. 高级技巧
自定义计数器样式
<span class="ui-li-count" style="background:#f33; color:white;">99+</span>
右侧图标（不占位）
<a href="#">
<h2>设置</h2>
<p>隐私与安全</p>
<span class="ui-li-aside ui-icon-arrow-r ui-btn-icon-notext"></span>
</a>
多行描述
<li>
<a href="#">
<h2>长标题示例</h2>
<p>第一行描述文字</p>
<p>第二行描述文字，自动换行</p>
<p class="ui-li-aside">03:06</p>
</a>
</li>
5. JavaScript 动态添加内容
<script>
$(document).on("pagecreate", function() {
var newItem = `
<li>
<a href="#">
<img src="https://picsum.photos/80/80?random=6" class="ui-li-thumb">
<h2>新联系人</h2>
<p>刚刚添加</p>
<p class="ui-li-aside">现在</p>
</a>
</li>`;
$("#contactList").append(newItem).listview("refresh");
});
</script>
6. 最佳实践
| 建议 | 说明 |
|---|
缩略图用 border-radius: 50% | 圆形头像 |
时间用 ui-li-aside | 右对齐 |
未读用 ui-li-count | 醒目 |
| 避免超过 3 行文字 | 影响可读性 |
动态添加后调用 listview("refresh") | 必须 |
7. 常见问题
| 问题 | 解决方案 |
|---|
| 缩略图变形 | 固定 width 和 height |
| 计数器不圆 | 默认是圆的，勿改 border-radius |
| 右侧内容被遮挡 | 确保在 <p> 内 |
| 动态内容不显示 | 忘记 .listview("refresh") |
8. 推荐模板
<!-- 标准消息项 -->
<li>
<a href="#">
<img src="avatar.jpg" class="ui-li-thumb">
<h2>发送者</h2>
<p>消息预览...</p>
<p class="ui-li-aside">03:06</p>
<span class="ui-li-count">2</span>
</a>
</li>
<!-- 无链接信息项 -->
<li>
<h2>标题</h2>
<p class="ui-li-aside">值</p>
</li>
总结：内容布局指南
| 位置 | 推荐内容 |
|---|
| 左侧 | ui-li-thumb 头像 |
| 主区 | <h2> + <p> 标题+描述 |
| 右侧 | ui-li-aside 时间/状态 |
| 右上角 | ui-li-count 未读数 |
需要我为你生成：
- 微信聊天列表（带气泡预览）？
- 邮箱收件箱（多选删除）？
- 商品收藏夹（可编辑）？
随时告诉我！
