您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

jQuery Mobile ListView 動態加載與點擊傳值實現

編輯：程式設計綜合問答

核心需求

從後台獲取列表數據渲染 ListView，點擊某項跳轉詳情頁並傳遞數據。

關鍵技術點

動態 `append` 數據後必須調用 `.listview('refresh')` 更新 UI

完整示例：AJAX 動態加載 + 點擊跳轉

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ListView Demo</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.10.2.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" id="listPage">
    <div data-role="header"><h1>列表頁</h1></div>
    <div role="main" class="ui-content">
      <ul data-role="listview" id="dataList"></ul>
    </div>
  </div>

  <!-- 詳情頁模板 -->
  <div data-role="page" id="detailPage">
    <div data-role="header"><h1>詳情</h1></div>
    <div role="main" class="ui-content" id="detailContent"></div>
  </div>

  <script>
  $(function() {
    // 1. 模擬 AJAX 獲取數據
    const mockData = [
      {id: 1, name: '項目一', desc: '詳細描述 1', price: 100},
      {id: 2, name: '項目二', desc: '詳細描述 2', price: 200},
      {id: 3, name: '項目三', desc: '詳細描述 3', price: 300}
    ];

    // 2. 渲染列表
    const $list = $('#dataList');
    mockData.forEach(item => {
      $list.append(`<li><a href="#detailPage" data-id="${item.id}">${item.name}</a></li>`);
    });
    $list.listview('refresh'); // 關鍵：刷新樣式

    // 3. 點擊事件委託（動態元素需委託）
    $list.on('click', 'a', function(e) {
      const id = $(this).data('id');
      const item = mockData.find(d => d.id === id);
      
      // 方案 A: 存入 sessionStorage 詳情頁讀取
      sessionStorage.setItem('detailItem', JSON.stringify(item));
      
      // 方案 B: URL 參數傳遞（頁面跳轉自動帶參）
      // $(this).attr('href', '#detailPage?id=' + id);
    });

    // 4. 詳情頁初始化讀取數據
    $(document).on('pageshow', '#detailPage', function() {
      const item = JSON.parse(sessionStorage.getItem('detailItem') || '{}');
      if (item.id) {
        $('#detailContent').html(`
          <h3>${item.name}</h3>
          <p>${item.desc}</p>
          <p>價格: ¥${item.price}</p>
        `);
      }
    });
  });
  </script>
</body>
</html>

傳值方案對比

方案	優點	缺點	適用場景
sessionStorage	容量大、支持對象、頁面關閉自動清理	同域限制、需序列化	單頁應用、數據較複雜
URL 參數	可分享、可刷新、SEO 友好	長度限制、敏感數據暴露	公開詳情、列表分頁
全局變量/Service	簡單、性能好	刷新丟失、內存洩漏風險	SPA 架構、Vue/React 狀態管理
data-* 屬性 + DOM 遍歷	無額外存儲	數據冗余、維護難	簡單只讀場景

jQuery Mobile 關鍵 API

`$list.listview('refresh')`：動態增刪後必調
`$(document).on('pageshow', '#pageId', fn)`：頁面顯示時觸發（支持 AJAX 頁面）
`data-transition="slide"`：頁面切換動畫
`data-filter="true"`：啟用列表搜索過濾

常見坑點

忘記 `refresh` 導致樣式錯亂
直接綁定 `click` 失效（動態元素需事件委託 `.on()`）
頁面跳轉前未存數據，詳情頁讀取為空
多頁模板 `id` 衝突（全局唯一）

總結

jQuery Mobile ListView 動態加載核心是 append + refresh。點擊傳值推薦 sessionStorage 存對象，詳情頁 `pageshow` 事件讀取渲染。現代項目建議遷移至 Vue/React + UI 庫（如 Vant, Ant Design Mobile）。