菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 列表视图

likuolei

jQuery Mobile 列表视图（Listview）详解

列表视图（Listview） 是 jQuery Mobile 的 核心组件，用于展示 导航、联系人、设置、搜索结果 等，支持 图标、分隔线、计数器、缩略图、过滤、自动分隔 等强大功能，触控优化，响应式。

是 jQM 中 使用频率最高 的组件之一！

1. 基本结构

<ul data-role="listview">
  <li><a href="#">列表项 1</a></li>
  <li><a href="#">列表项 2</a></li>
  <li><a href="#">列表项 3</a></li>
</ul>

必须：

  • <ul> 或 <ol>
  • data-role="listview"

2. 常用属性

属性值说明
data-inset="true"true/false圆角内嵌（推荐）
data-filter="true"true搜索框过滤
data-filter-placeholder="搜索..."文字搜索框提示
data-divider-theme="a"a/b分隔线主题
data-autodividers="true"true自动按首字母分组
data-count-theme="b"a/b计数器主题

3. 列表类型一览

类型写法场景
基础链接列表<li><a href="#">导航
不可点击项<li><h3>标题</h3></li>信息展示
带图标ui-icon-home菜单
带缩略图<img src="">联系人
带计数器<span class="ui-li-count">5</span>未读消息
分隔线data-role="list-divider"分组
嵌套列表<ul> 内再套 <ul>树形菜单

4. 完整示例（可直接运行）

<!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>
</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="#" class="ui-btn ui-icon-user ui-btn-icon-left">张三</a></li>
      <li><a href="#" class="ui-btn ui-icon-user ui-btn-icon-left">李四</a></li>
      <li><a href="#" class="ui-btn ui-icon-user ui-btn-icon-left">王五</a></li>
      <li><a href="#" class="ui-btn ui-icon-user ui-btn-icon-left">赵六</a></li>
    </ul>

    <!-- 2. 带缩略图 + 描述 -->
    <h3>应用列表</h3>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
          <img src="https://picsum.photos/80/80?random=1" class="ui-li-thumb">
          <h2>微信</h2>
          <p>社交应用，连接你我</p>
          <span class="ui-li-count">99+</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://picsum.photos/80/80?random=2" class="ui-li-thumb">
          <h2>支付宝</h2>
          <p>安全支付，生活更便捷</p>
          <span class="ui-li-count">3</span>
        </a>
      </li>
    </ul>

    <!-- 3. 自动分组（autodividers） -->
    <h3>城市列表（自动分组）</h3>
    <ul data-role="listview" data-inset="true" data-autodividers="true">
      <li><a href="#">Amsterdam</a></li>
      <li><a href="#">Beijing</a></li>
      <li><a href="#">Brussels</a></li>
      <li><a href="#">Cairo</a></li>
      <li><a href="#">Copenhagen</a></li>
    </ul>

    <!-- 4. 手动分隔线 + 计数器 -->
    <h3>消息中心</h3>
    <ul data-role="listview" data-inset="true" data-divider-theme="a">
      <li data-role="list-divider">今天</li>
      <li>
        <a href="#">
          <h2>系统通知</h2>
          <p>您的账户已登录新设备</p>
          <span class="ui-li-count">1</span>
        </a>
      </li>
      <li data-role="list-divider">昨天</li>
      <li>
        <a href="#">
          <h2>订单更新</h2>
          <p>您的包裹已发出</p>
          <span class="ui-li-count">2</span>
        </a>
      </li>
    </ul>

    <!-- 5. 嵌套列表（树形菜单） -->
    <h3>设置</h3>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
          <h2>账户与安全</h2>
          <p>密码、隐私、登录设备</p>
        </a>
      </li>
      <li>
        <a href="#submenu" data-transition="slide">
          <h2>更多设置</h2>
          <p>语言、主题、关于</p>
        </a>
        <ul id="submenu" data-role="listview">
          <li><a href="#">语言</a></li>
          <li><a href="#">夜间模式</a></li>
          <li><a href="#">版本：v1.0.0</a></li>
        </ul>
      </li>
    </ul>

    <!-- 6. 当前信息 -->
    <h3>用户信息</h3>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">个人资料</li>
      <li>
        <h2>国家</h2>
        <p>比利时 (BE)</p>
      </li>
      <li>
        <h2>当前时间</h2>
        <p>2025年11月17日 03:05（CET）</p>
      </li>
    </ul>

  </div>

  <div data-role="footer" data-position="fixed">
    <h4>比利时 © 2025</h4>
  </div>
</div>

</body>
</html>

5. 列表项结构详解

<li>
  <a href="#">
    <img src="avatar.jpg" class="ui-li-thumb">     <!-- 缩略图 -->
    <h2>主标题</h2>                               <!-- 大字 -->
    <p>副标题描述文字</p>                         <!-- 小字 -->
    <span class="ui-li-count">99</span>           <!-- 计数器 -->
  </a>
</li>

6. JavaScript 控制

<script>
$(document).on("pagecreate", function() {
  // 刷新列表（动态添加后）
  $("#myList").listview("refresh");

  // 过滤
  $("#myList").listview("option", "filter", true);

  // 添加项
  $("#myList").append('<li><a href="#">新项</a></li>').listview("refresh");
});
</script>

7. 最佳实践

建议说明
始终加 data-inset="true"美观圆角
带搜索加 data-filter="true"用户体验佳
分组用 data-role="list-divider"清晰
未读用 ui-li-count醒目
避免放太多图片影响加载速度

8. 常见问题

问题解决方案
搜索框不显示必须 data-filter="true"
动态添加不显示调用 .listview("refresh")
自动分组不工作必须 data-autodividers="true"
图标错位确保 ui-btn-icon-left

9. 推荐模板

<!-- 带搜索 + 内嵌 -->
<ul data-role="listview" data-inset="true" data-filter="true">
  <li><a href="#">项</a></li>
</ul>

<!-- 带缩略图 + 计数 -->
<li>
  <a href="#">
    <img src="img.jpg" class="ui-li-thumb">
    <h2>标题</h2>
    <p>描述</p>
    <span class="ui-li-count">5</span>
  </a>
</li>

总结：属性速查

属性常用值
data-rolelistview
data-insettrue（圆角）
data-filtertrue（搜索）
data-autodividerstrue（自动分组）
data-count-themeb（计数器深色）

需要我为你生成：

  • 动态 AJAX 加载联系人列表？
  • 无限滚动列表？
  • 可多选 + 删除功能？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部