极客观点
项目管理
HarmonyOS
需求：第一张是video，其余三张是图片，一起轮播；
bug：最后一张图片轮播到第一张video时有空白，怎么去除？
目前处理的方法：是在data里的sliders前后都加上video，但是这样暂停或播放完视频时，继续轮播就会出现两个video，一个是初始状态，另一个是暂停或者播放完时的状态，虽然很短暂，一闪而过，但还是可以看的见，并且下方还是出现5个小点点(我只需要4个小点点)，这样的bug又该怎么解决？请各位前端大神赐教
如图：
<template>
<div>
<div id="sidebar">
<div class='panel'>
<div id="slider">
<div class="window" @mouseover="stop" @mouseleave="player">
<!-- 轮播图片 -->
<ul class="container" :style="containerStyle">
<li @click="dianji(sliders[sliders.length - 1].a)">
<img :src="sliders[sliders.length - 1].img" alt="">
</li>
<li v-for="(item, i) in sliders" >
<video v-if="item.type == 'video_pro'" :id="item.id" class="video-js vjs-big-play-centered"
controls data-setup="{}">
<source :src="item.video" type='video/mp4' class="video_item">
</video>
<img class="img" v-else="item.type == 'image'" @click="dianji(item.a)" :src="item.img" alt="">
</li>
<li @click="dianji(sliders[0].a)">
<img :src="sliders[0].img" alt="">
</li>
</ul>
<!-- 轮播左右箭头 -->
<ul class="direction">
<li class="left" @click="move(450, 1, speed)">
<svg class="icon" width="18px" height="18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z" /></svg>
</li>
<li class="right" @click="move(450, -1, speed)">
<svg class="icon" width="18px" height="18px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z" /></svg>
</li>
</ul>
<!-- 轮播圆点 -->
<ul class="dots">
<li v-for="(dot, i) in sliders" :key="i"
:class="{dotted: i === (currentIndex-1)}" @click = jump(i+1)>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</template>
<script>
import Video from 'video.js'
export default {
name: 'Rotation_chart',
props: {
initialSpeed: {
type: Number,
default: 30
},
initialInterval: {
type: Number,
default: 4
}
},
data () {
return {
sliders:[
{
id: 'myVideo1',
type: 'video_pro',
video: 'https://mooc.len.com/wp-content/uploads/2018/11/20181128.mp4',
},
{
type: 'image',
img: require('../public/images/acronym.jpg'),
a: 'sip:selfser@len.com'
},
{
type: 'image',
img: require('../public/images/studio.jpg'),
a: 'http://cai.xyz'
},
{
type: 'image',
img: require('../public/images/baibianxiaoka.png'),
a: 'http://ss.len.com'
},
{
id: 'myVideo1',
type: 'video_pro',
video: 'https://mooc.len.com/wp-content/uploads/2018/11/20181128.mp4',
},
],
currentIndex:1,
distance:-450,
transitionEnd: true,
speed: this.initialSpeed,
playBtn: false, //播放
}
},
computed:{
containerStyle() {
return {
transform:`translate3d(${this.distance}px, 0, 0)`
}
},
interval() {
return this.initialInterval * 1500
},
},
mounted() {
this.init();
this.initVideo()
},
methods:{
init() {
this.player()
window.onblur = function() { this.stop() }.bind(this)
window.onfocus = function() { this.player() }.bind(this)
},
move(offset, direction, speed) {
console.log(speed)
if (!this.transitionEnd) return
this.transitionEnd = false
direction === -1 ? this.currentIndex += offset/450 : this.currentIndex -= offset/450
if (this.currentIndex > 4) this.currentIndex = 1
if (this.currentIndex < 1) this.currentIndex = 4
const destination = this.distance + offset * direction
this.animate(destination, direction, speed)
},
animate(des, direc, speed) {
if (this.temp) {
window.clearInterval(this.temp);
this.temp = null ;
}
this.temp = window.setInterval(() => {
if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
this.distance += speed * direc
} else {
this.transitionEnd = true
window.clearInterval(this.temp)
this.distance = des
if (des < -1820) this.distance = -450
if (des > -450) this.distance = -1820
}
}, 50)
},
jump(index) {
const direction = index - this.currentIndex >= 0 ? -1 : 1;
const offset = Math.abs(index - this.currentIndex) * 450;
const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;
this.move(offset, direction, jumpSpeed)
},
player() {
if (this.timer || this.playBtn == true) {
window.clearInterval(this.timer)
this.timer = null
}
else{
this.timer = window.setInterval(() => {
this.move(450, -1, this.speed)
}, this.interval)
}
},
stop() {
window.clearInterval(this.timer)
this.timer = null
},
dianji(a){
window.open(a)
},
// 播放视频时轮播图状态
initVideo() {
let leftArrow = $(".left"); //轮播图左箭头
let rightArrow = $(".right");//轮播图右箭头
let dots = $(".dots"); //轮播图四个点点
let playButton = $("button .vjs-big-play-button");
let that = this;
let myPlayer1 = Video('myVideo1');
// let myPlayer2 = Video('myVideo2');
// 播放视频时隐藏左右箭头和四个点，并停止轮播
myPlayer1.on('play',() =>{
console.log('正在播放');
leftArrow.hide()
rightArrow.hide()
dots.hide()
this.playBtn = true
});
//暂停视频时显示左右箭头和四个点，并启动轮播
myPlayer1.on('pause',() =>{
console.log("暂停中")
leftArrow.show()
rightArrow.show()
dots.show()
playButton.show()
this.playBtn = false
});
//结束视频时显示左右箭头和四个点，并启动轮播
myPlayer1.on('ended',() => {
console.log('结束');
leftArrow.show()
rightArrow.show()
dots.show()
playButton.show()
this.playBtn = false
that.player() //重新调用player()方法
});
// // 播放视频时隐藏左右箭头和四个点，并停止轮播
// myPlayer2.on('play',() =>{
// console.log('正在播放');
// leftArrow.hide()
// rightArrow.hide()
// dots.hide()
// this.playBtn = true
// });
// //暂停视频时显示左右箭头和四个点，并启动轮播
// myPlayer2.on('pause',() =>{
// console.log("暂停中")
// leftArrow.show()
// rightArrow.show()
// dots.show()
// this.playBtn = false
// });
//结束视频时显示左右箭头和四个点，并启动轮播
// myPlayer2.on('ended',() => {
// console.log('结束');
// leftArrow.show()
// rightArrow.show()
// dots.show()
// this.playBtn = false
// that.player() //重新调用player()方法
// });
}
}}
</script>
自己写的轮播图吗?直接用swiper很方便的，还没有bug