下拉刷新示例
 
 
  
 
    

body { margin: 0; padding: 0; } #container { width: 100%; height: 100vh; } header { background: #f1f1f1; padding: 20px; } #content { padding: 20px; } @keyframes spinner { to { transform: rotate(360deg); } } #spinner { margin: 10px auto; display: block; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top-color: #3498db; border-radius: 50%; animation: spinner 1s linear infinite; }

$(document).ready(function() { var content = $("#content"); var spinner = $("#spinner"); var isDragging = false; var startOffset, endOffset; var threshold = 100; // 触发下拉刷新的阈值 content.on("touchstart mousedown", function(event) { isDragging = true; startOffset = getOffset(event); }); content.on("touchmove mousemove", function(event) { if (!isDragging) return; endOffset = getOffset(event); // 检查是否达到了触发阈值 if (endOffset - startOffset > threshold) { spinner.show(); // 执行下拉刷新操作 refreshContent(); } }); content.on("touchend mouseup", function(event) { isDragging = false; spinner.hide(); }); function getOffset(event) { return event.originalEvent.touches ? event.originalEvent.touches[0].pageY : event.pageY; } function refreshContent() { // 在这里执行具体的下拉刷新操作，例如从服务器获取最新数据 // 注意：由于每个应用的具体实现方式不同，这里的代码可能需要根据实际情况进行调整 setTimeout(function() { spinner.hide(); // 刷新页面内容 content.html("刷新后的内容"); }, 1500); } });