图片横向滑动展示效果

创建directives.js文件

// 横向列表拖拽
const draggleScrollX = {inserted(el, binding) {let isDragging = false;let startX = 0;let scrollLeft = 0;el.classList.add("draggle-horizontal");// 添加监听事件-鼠标按下const onMouseDown = (event) => {isDragging = true;// 鼠标位置和初始滚动位置startX = event.pageX - el.offsetLeft;scrollLeft = el.scrollLeft;el.style.cursor = "grabbing";el.style.userSelect = "none";};// 鼠标离开或者松开const onMouseUpOrLeave = () => {isDragging = false;el.style.cursor = "auto";el.style.userSelect = "";setTimeout(() => {const childrenNodes = Array.from(el.children);childrenNodes.forEach((childrenNode) => {childrenNode.style.pointerEvents = "all";});// 粘滞定位if (binding.modifiers.snap) {// const maxScrollWidth = el.scrollWidth - el.clientWidth; // 最大滚动宽度const scrollStep = [0]; // 每个值的滚动stepchildrenNodes.forEach((childrenNode, index) => {const rectWidth = childrenNode.getBoundingClientRect().width;const style = window.getComputedStyle(childrenNode);const nodeWidth = rectWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);if (index !== childrenNodes.length - 1) {scrollStep[index + 1] = nodeWidth + scrollStep[index];}});const diffScroll = scrollStep.map((step) => Math.abs(step - el.scrollLeft));const minDiffIndex = diffScroll.indexOf(Math.min(...diffScroll));el.scrollTo({ left: scrollStep[minDiffIndex], behavior: "smooth" });}}, 100);};// 鼠标移动const onMouseMove = (event) => {if (!isDragging) return;const x = event.pageX - el.offsetLeft;const walk = x - startX;el.scrollLeft = scrollLeft - walk;Array.from(el.children).forEach((childrenNode) => {childrenNode.style.pointerEvents = "none";});// 触发自定义事件，传递当前滚动位置  不需要可以不用这部分代码const scrollEvent = new CustomEvent("draggle-scroll-x", {detail: {scrollLeft: el.scrollLeft,},});el.dispatchEvent(scrollEvent);};// 设置初始样式el.style.cursor = "auto";el.style.overflow = "auto";el.style.scrollbarWidth = "none";el.style.cssText += "::-webkit-scrollbar { display: none; }";el._dragEvents = {onMouseDown,onMouseUpOrLeave,onMouseMove,};el.addEventListener("mousedown", onMouseDown);el.addEventListener("mousemove", onMouseMove);el.addEventListener("mouseup", onMouseUpOrLeave);el.addEventListener("mouseleave", onMouseUpOrLeave);},unbind(el) {const { onMouseDown, onMouseUpOrLeave, onMouseMove } = el._dragEvents || {};el.removeEventListener("mousedown", onMouseDown);el.removeEventListener("mousemove", onMouseMove);el.removeEventListener("mouseup", onMouseUpOrLeave);el.removeEventListener("mouseleave", onMouseUpOrLeave);},
};
export { draggleScrollX };

.vue文件内使用 vue2

import { draggleScrollX } from "../../utils/directives.js";
export default {directives: {draggleScrollX: draggleScrollX,},
}

最外部的div上面使用

<div class="swiper" v-draggle-scroll-x @draggle-scroll-x="handleScroll">
</div>

@draggle-scroll-x=“handleScroll” 这个函数是为了获取到滚动的距离 也就是滚动定位 可以做一些处理

handleScroll(event) {const scrollLeft = event.detail.scrollLeft;console.log("滚动的距离",scrollLeft);}

.snap加了吸附粘滞的了 但是效果不是特别明显

<div class="swiper" v-draggle-scroll-x.snap @draggle-scroll-x="handleScroll">
</div>