js实现左右滑动
实现左右滑动的JavaScript方法
使用Touch事件监听实现基础滑动
let startX, moveX;
const slider = document.getElementById('slider');
slider.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
slider.addEventListener('touchmove', (e) => {
moveX = e.touches[0].clientX;
const diff = moveX - startX;
slider.style.transform = `translateX(${diff}px)`;
});
slider.addEventListener('touchend', () => {
// 添加滑动结束后的逻辑
});使用CSS Transform实现平滑动画
#slider {
transition: transform 0.3s ease;
width: 100%;
overflow: hidden;
}使用第三方库实现高级滑动
安装Swiper.js库
npm install swiper基本Swiper配置
import Swiper from 'swiper';
import 'swiper/css';
new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});响应式滑动布局实现
添加断点配置
new Swiper('.swiper', {
breakpoints: {
640: { slidesPerView: 2 },
1024: { slidesPerView: 3 }
}
});性能优化建议
使用will-change属性提升性能
#slider {
will-change: transform;
}节流处理touchmove事件
function throttle(fn, delay) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall < delay) return;
lastCall = now;
return fn(...args);
};
}
slider.addEventListener('touchmove', throttle(handleMove, 16));
