vue2设置横向滚动指令

图片横向滑动展示效果

创建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]; // 每个值的滚动step
                    childrenNodes.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>