vue H5手写图片视频组合轮播

由于使用组件有bug所以自己手写了简单的轮播,轮播图第一页多个图片或多个视频展示第二张的一部分，一张图片或视频则占满，加上vant的图片预览

以下是全部代码：

<template>
    <div class="container">
        <!-- 轮播 -->
        <div class="carousel" v-if="datas.length > 0">
            <div
                class="carouselimg"
                @touchstart="touchStart"
                @touchend="touchEnd"
            >
                <div
                    :class="datas.length < 2 ? 'carouselItem2' : 'carouselItem'"
                    v-for="(item, idx) in datas"
                    :key="idx"
                >
                    <img
                        :class="datas.length < 2 ? 'itemImg2' : 'itemImg'"
                        v-if="videoType(item.adUrl) == 'img'"
                        :src="item.adUrl" @click.prevent="getImg(datas, idx)"
                    />
                    <div
                        v-else
                        class="itemVideo"
                        @click.prevent="openVideo(item.adUrl, item.id)"
                    >
                        <img
                            class="img3"
                            v-show="imgShow"
                            src="https://wx.applet.style.51dsx.cn/h5img/[email protected]"
                        />
                        <video
                            :class="datas.length < 2 ? 'video2' : 'video'"
                            :id="item.id"
                            :src="item.adUrl"
                            :poster="item.logo"
                            playsinline
                            webkit-playsinline
                        ></video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
    data() {
        return {
            touchStartX: 0, // 触屏起始点x
            touchStartY: 0, // 触屏起始点y
            videoid: "",
            imgShow: true,
            datas: [
                //可以试着只留一个视频、一个图片、或者多个图片、多个视频
                {
                    adUrl:
                        "http://company.51dsx.cn/uploads/20211002/d1a21f5b0824085617aae1da7f2fb74e.mp4",
                    logo:
                        "https://51dsx-image-1300426310.cos.ap-shanghai.myqcloud.com/uploads/20210820/17ee7c81ddcbcacf662d92d83a87e59e.png",
                    id: 1225
                },
                // {
                //     adUrl:
                //         "http://company.51dsx.cn/uploads/20211002/d1a21f5b0824085617aae1da7f2fb74e.mp4",
                //     logo:
                //         "https://51dsx-image-1300426310.cos.ap-shanghai.myqcloud.com/uploads/20210820/17ee7c81ddcbcacf662d92d83a87e59e.png",
                //     id: 1226
                // },
                {
                    adUrl:
                        "http://company.51dsx.cn/uploads/20210830/2a71e8487083c8b07fffa135a2aadd5d.png",
                    id: 533
                },
                {
                    adUrl:
                        "http://company.51dsx.cn/uploads/20210830/2a71e8487083c8b07fffa135a2aadd5d.png",
                    id: 534
                }
            ]
        };
    },
    methods: {
        touchStart(e) {
            console.log("触摸开始");
            this.touchStartX = e.touches[0].clientX;
            this.touchStartY = e.touches[0].clientY;
        },
        touchEnd(e) {
            console.log("触摸结束");
            let deltaX = e.changedTouches[0].clientX - this.touchStartX;
            let deltaY = e.changedTouches[0].clientY - this.touchStartY;
            // X轴的滑动距离大于 delta，且此次事件是以X轴移动为主（左滑或者右滑）；
            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                if (deltaX >= 0) {
                    console.log("右滑");
                    if (this.datas.length > 1) {
                        // 多个换滑动时暂停视频
                        this.showPlayBtn = true;
                        const videoObj = document.getElementById(this.videoid);
                        this.imgShow = true;
                        videoObj ? videoObj.pause() : "";
                    }
                } else {
                    console.log("左滑");
                    if (this.datas.length > 1) {
                        this.showPlayBtn = true;
                        const videoObj = document.getElementById(this.videoid);
                        this.imgShow = true;
                        videoObj ? videoObj.pause() : "";
                    }
                }
                // Y轴的滑动距离大于 delta，且此次事件是以Y轴移动为主（上滑或者下滑）；
            } else if (Math.abs(deltaX) < Math.abs(deltaY)) {
                if (deltaY < 0) {
                    console.log("上滑");
                } else {
                    console.log("下滑");
                }
                // 两轴位移都特别小，可以判断是点击
            } else if (Math.abs(deltaY) < 25 && Math.abs(deltaX) < 25) {
                console.log("点击");
            } else {
                this.showPlayBtn = true;
                const videoObj = document.getElementById(this.videoid);
                this.imgShow = true;
                videoObj ? videoObj.pause() : "";
                console.log("可能是误触");
            }
        },
        openVideo(url, id) {
            //播放视频
            this.videoid = id;
            const videoObj = document.getElementById(id);
            if (this.showPlayBtn) {
                this.showPlayBtn = false;
                this.imgShow = false;
                videoObj.play();
                console.log(this.imgShow);
            } else {
                this.showPlayBtn = true;
                this.imgShow = true;
                videoObj.pause();
            }
        },
        videoType(url) {
            //区分视频和图片
            let flieArr = url.split(".");
            let suffix = flieArr[flieArr.length - 1];
            if (suffix == "mp4") {
                return "mp4";
            } else {
                return "img";
            }
        },
        getImg(images, index) {
            //图片点击预览
            let im = [];
            this.datas.forEach(el => {
                let flieArr = el.adUrl.split(".");
                let suffix = flieArr[flieArr.length - 1];
                if (suffix == "mp4") {
                } else {
                    im.push(el.adUrl);
                }
            });
            ImagePreview({
                images: im,
                showIndex: false,
                loop: false,
                startPosition: index
            });
        }
    }
};
</script>

<style scoped>
.container {
    max-width: 7.5rem;
    margin: 0 auto;
}
.video {
    width: 3rem !important;
    height: 1.69rem !important;
    background-color: #f2f2f2;
    border-radius: 0.1rem;
}
.video2 {
    width: 100% !important;
    height: 1.69rem !important;
    background-color: #f2f2f2;
    border-radius: 0.1rem;
}
::-webkit-scrollbar {
    /* 隐藏滚动条 */
    display: none;
}
.carousel {
    padding: 0 0.16rem;
}
.carouselimg {
    height: 1.69rem !important;
    width: 100% !important;

    border-radius: 0.06rem;
    /* 设置超出滚动 */
    overflow-x: auto;
    overflow-y: hidden;
    height: 1.08rem;
    display: flex;
    justify-content: space-between;
}
.carouselimg::before {
    position: absolute;
    width: 100vw;
    height: 0.01rem;
    content: "";
    bottom: 0px;
    left: 0rem;
}
.carouselItem2 {
    width: 100% !important;
    height: 1.69rem !important;
    border-radius: 0.1rem;
}
.itemImg2 {
    width: 100% !important;
    height: 1.69rem !important;
    border-radius: 0.1rem;
    object-fit: contain;
    background-color: #f2f2f2;
    object-fit: cover;
}
.itemImg {
    background-color: #f2f2f2;
    object-fit: contain;
    width: 3rem !important;
    height: 1.69rem !important;
    border-radius: 0.1rem;
    object-fit: cover;
}
.carouselItem {
    margin-right: 0.12rem;
    width: 3rem;
    height: 1.69rem;
}
.carouselItem:last-child {
    margin-right: 0 !important;
}

.itemVideo {
    position: relative;
    height: 100%;
}
.itemVideo .img3 {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}
@media (min-width: 500px) {
    .carouselimg,
    .carouselItem,
    .carouselItem2,
    .video,
    .video2,
    .itemImg,
    .itemImg2 {
        height: 4rem !important;
    }
    .carouselItem {
        width: 6.4rem !important;
    }
    .itemVideo .img3 {
        width: 0.6rem !important;
        height: 0.6rem !important;
    }
    .video2,
    .itemImg2 {
        width: 100% !important;
        border-radius: 0.2rem;
    }
    .video,
    .itemImg {
        width: 6.4rem !important;
        border-radius: 0.4rem !important;
    }
}
</style>