jquery mobile 实现list view的限量加载

要实现jQuery Mobile的限量加载列表视图（list view），您可以使用`prepend()`方法和自定义的加载按钮。以下是一个简单的示例：

HTML:

<div data-role="page">
  <div data-role="header">
    <h1>限量加载列表视图</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" id="myList">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
      <li>项目4</li>
      <li>项目5</li>
    </ul>
    <a href="#" id="loadMore">加载更多</a>
  </div>
</div>

JavaScript:

$(document).on('pagecreate', function() {
  var itemsPerPage = 2; // 每页显示的项目数量
  var currentPage = 1; // 当前页码

  // 加载更多按钮点击事件
  $('#loadMore').on('click', function() {
    var startIndex = (currentPage - 1) * itemsPerPage;
    var endIndex = startIndex + itemsPerPage;
    var $list = $('#myList');
    
    // 检查是否还有更多项目可加载
    if (endIndex >= $list.children().length) {
      $(this).hide(); // 隐藏加载更多按钮
    }

    // 将下一页的项目插入到列表中
    $list.children().slice(startIndex, endIndex).clone().prependTo($list).enhanceWithin();
    
    currentPage++; // 增加当前页码
  });
});

这个示例中，我们设置了每页显示2个项目。当点击"加载更多"按钮时，通过`slice()`方法从原始列表中获取下一页的项目，然后使用`clone()`方法克隆这些项目，并使用`prependTo()`方法将它们插入到列表中。最后，我们使用`enhanceWithin()`方法来更新列表视图的样式。

请注意，这只是一个简单的示例，您可能需要根据自己的需求进行修改和优化。