HTML5手機列表頁面可以通過滑動下拉刷新數據，提升用戶體驗。
下面是HTML5代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5滑動下拉刷新數據示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
#list{height:400px;width:90%;overflow:auto;border:1px solid #ddd;}
.item{height:40px;line-height:40px;text-align:center;}
</style>
</head>
<body>
<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<script>
$(document).ready(function() {
var page = 1;
var perPage = 6;
var isLoading = false;
$("#list").on("scroll",function(){
var scrollHeight = $(this).prop("scrollHeight");
var scrollTop = $(this).scrollTop() + $(this).height();
if(scrollTop >= (scrollHeight - 10) && !isLoading ){
isLoading = true;
page++;
setTimeout(function(){
var html = "";
for(var i=1;i<=perPage;i++){
html += "<div class='item'>" + (page*perPage+i) + "</div>";
}
$("#list").append(html);
isLoading = false;
},1000); // 模擬異步數據請求
}
})
});
</script>
</body>
</html>在上面的代碼中，我們使用了jQuery庫來綁定滑動事件，并且在用戶滑動到頁面底部時，異步請求新的數據并添加到頁面中，實現了滑動下拉刷新數據的效果。