js实现手指下滑下拉
实现手指下滑下拉效果
在JavaScript中实现手指下滑下拉效果，通常需要监听触摸事件（touchstart、touchmove、touchend）并结合CSS过渡或动画来实现平滑的下拉效果。
监听触摸事件
const element = document.getElementById('pull-to-refresh');
let startY, currentY;
element.addEventListener('touchstart', (e) => {
startY = e.touches[0].clientY;
currentY = startY;
});
element.addEventListener('touchmove', (e) => {
currentY = e.touches[0].clientY;
const diff = currentY - startY;
if (diff > 0) {
e.preventDefault();
element.style.transform = `translateY(${diff}px)`;
}
});
element.addEventListener('touchend', (e) => {
const diff = currentY - startY;
if (diff > 100) {
// 触发刷新逻辑
refreshContent();
}
element.style.transform = 'translateY(0)';
element.style.transition = 'transform 0.3s ease';
setTimeout(() => {
element.style.transition = '';
}, 300);
});刷新内容逻辑
function refreshContent() {
// 显示加载指示器
showLoadingIndicator();
// 模拟异步加载
setTimeout(() => {
// 更新内容
updateContent();
// 隐藏加载指示器
hideLoadingIndicator();
}, 1000);
}CSS样式
#pull-to-refresh {
position: relative;
overflow: hidden;
}
.loading-indicator {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
display: none;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}显示/隐藏加载指示器
function showLoadingIndicator() {
const indicator = document.querySelector('.loading-indicator');
indicator.style.display = 'flex';
}
function hideLoadingIndicator() {
const indicator = document.querySelector('.loading-indicator');
indicator.style.display = 'none';
}注意事项
- 确保在
touchmove事件中调用e.preventDefault()来阻止默认滚动行为 - 设置适当的阈值（如100px）来判断是否触发刷新
- 使用CSS过渡效果使下拉和回弹更平滑
- 考虑添加加载动画或状态指示器以提升用户体验
兼容性处理
对于不支持触摸事件的设备，可以添加鼠标事件作为后备：
element.addEventListener('mousedown', (e) => {
startY = e.clientY;
currentY = startY;
});
element.addEventListener('mousemove', (e) => {
if (startY === null) return;
currentY = e.clientY;
// 其余逻辑与touchmove相同
});
element.addEventListener('mouseup', (e) => {
// 逻辑与touchend相同
});
