vue2 控制滑动列表左右一屏滑动

开心羊羊

已于 2023-06-12 16:37:58 修改

阅读量440

点赞数 2

文章标签： vue.js javascript 前端

于 2023-06-12 16:34:51 首次发布

本文链接：https://blog.csdn.net/weixin_50622621/article/details/131171842

版权

            <div class="boxx" ref="devInsall">
                <div class="box no_copy">
                    <span class="box-item">1</span>
                    <span class="box-item">容2</span>
                    <span class="box-item">内容3</span>
                    <span class="box-item">动内容4</span>
                    <span class="box-item">滚动内容5</span>
                    <span class="box-item">向滚动内容6</span>
                    <span class="box-item">横向滚动内容7</span>
                    <span class="box-item">是横向滚动内容8</span>
                    <span class="box-item">我是横向滚动内容9</span>
                    <span class="box-item">我是横向滚动内10</span>
                    <span class="box-item">我是横向滚动11</span>
                    <span class="box-item">我是横向滚12</span>
                </div>
            </div>

watch: {
        showEditSupplyGoods() {
            if (this.showEditSupplyGoods) {
                this.$nextTick(() => {
                    this.scrollInit()
                })
            }
        }
    },

methods:{

scrollInit() {
            const boxEle = document.getElementsByClassName('boxx')[0]
            let flag
            let downX
            let scrollLeft
            boxEle.addEventListener('mousedown', function (event) {
                flag = true
                downX = event.clientX
                scrollLeft = this.scrollLeft
            })
            boxEle.addEventListener('mousemove', function (event) {
                if (flag) {
                    let moveX = event.clientX
                    let scrollX = moveX - downX
                    this.scrollLeft = scrollLeft - scrollX
                }
            })
            boxEle.addEventListener('mouseup', function () {
                flag = false
            })
            boxEle.addEventListener('mouseleave', function () {
                flag = false
            })
        },
        leftFn() {
            const container = this.$refs.devInsall
            container.scrollTo({
                left: container.scrollLeft - container.clientWidth,
                behavior: 'smooth'
            })
        },
        rightFn() {
            const container = this.$refs.devInsall
            container.scrollTo({
                left: container.scrollLeft + container.clientWidth,
                behavior: 'smooth'
            })
        }
}