el-Carousel 走马灯实现移动端手滑切换

最新推荐文章于 2024-03-21 20:11:56 发布

心想事成--

最新推荐文章于 2024-03-21 20:11:56 发布

阅读量3.2k

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/zcy1005/article/details/125637392

版权

一

<el-carousel ref="carousel" :autoplay="autoplay" indicator-position="outside">
            <el-carousel-item v-for="(item, index) in bannerlist" :key="index">
                <div class="introduction_container" @click="bannerUrl(item)">
                    <el-image :src="item.img" alt="logo" >
                    </el-image>
                </div>
 </el-carousel-item>


二

        //是否自动播放
        stopAuto() {
            this.autoplay = false
        },
        startAuto() {
            this.autoplay = true
        },
        // 轮播手滑切换
        slideBanner() {
            let that = this
            //选中item的盒子
            var box = document.querySelector('.el-carousel__container')
            //手指起点X坐标
            var startPoint = 0
            //手指滑动重点X坐标
            var stopPoint = 0

            //重置坐标
            var resetPoint = function () {
                startPoint = 0
                stopPoint = 0
            }

            //手指按下
            box.addEventListener('touchstart', function (e) {
                //手指按下的时候停止自动轮播
                that.stopAuto()
                //手指点击位置的X坐标
                startPoint = e.changedTouches[0].pageX
            })
            //手指滑动
            box.addEventListener('touchmove', function (e) {
                //手指滑动后终点位置X的坐标
                stopPoint = e.changedTouches[0].pageX
            })
            //当手指抬起的时候，判断图片滚动离左右的距离
            box.addEventListener('touchend', function () {
                if (stopPoint == 0 || startPoint - stopPoint == 0) {
                    resetPoint()
                    that.startAuto()
                    return
                }
                if (startPoint - stopPoint > 0) {
                    resetPoint()
                    that.$refs.carousel.next()
                    that.startAuto()
                    return
                }
                if (startPoint - stopPoint < 0) {
                    resetPoint()
                    that.$refs.carousel.prev()
                    that.startAuto()
                    return
                }
            })
        },