Because there is a bug in the component, I wrote a simple carousel by hand. There are multiple pictures or videos on the first page of the carousel to show part of the second one. One picture or video is full, plus vant's picture preview
Here is the full code:
<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>