由于使用组件有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>