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

最新推荐文章于 2025-09-20 02:36:35 发布

原创

最新推荐文章于 2025-09-20 02:36:35 发布 · 置顶 · 641 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #轮播图 #swiper

本文介绍了由于使用现有组件存在bug，作者选择手动创建一个简单的Vue H5轮播效果。该轮播图能适应第一页多个图片或视频的展示，当内容为一张图片或视频时会全屏显示，并结合了Vant库的图片预览功能。

由于使用组件有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/card_button_play@2x.pn