需求:没有找到特别好的上下轮播插件-所以自己写了一个简单的demo
一.上下平滑轮播-移入停止-移出继续轮播
<!--
* 消息滚动
-->
<template>
<div class="news">
<div id="roll" class="InfoBox" @mouseover="this.mouseOver" @mouseout="this.mouseOut">
<div v-for="item in 5" :key="item" class="item">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
var area = document.getElementById("roll");
// 多加了一组
area.innerHTML += area.innerHTML;
this.area = area;
setInterval(this.scroll, 50);
},
data() {
return {
area: {},
stop: false,
scrollItemNumber: 0,
};
},
methods: {
scroll() {
if (!this.stop) {
// this.area.scrollHeight / 2 这是滚动所有元素的高度
if (this.area.scrollTop >= this.area.scrollHeight / 2) {
this.area.scrollTop = 0;
} else {
this.area.scrollTop++;
}
}
},
mouseOver() {
this.stop = true;
},
mouseOut() {
this.stop = false;
},
},
};
</script>
<style lang="scss" scoped>
.news {
margin: 20px;
height: 300px;
background: aqua;
text-align: center;
.InfoBox {
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
background: rgb(94, 163, 233);
.item {
margin-top: 30px;
padding: 10px;
background: rgb(54, 230, 83);
text-align: center;
cursor: pointer;
}
}
}
</style>
二.加了控制条件的上下轮播-我只是写了个demo(我这个控制条件是5s停顿一次 接着轮播)
<!--
* 消息滚动
-->
<template>
<div class="news">
<div id="roll" class="InfoBox" @mouseover="this.mouseOver" @mouseout="this.mouseOut">
<div v-for="item in 5" :key="item" class="item">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
var area = document.getElementById("roll");
// 多加了一组
area.innerHTML += area.innerHTML;
this.area = area;
setInterval(this.scroll, 50);
},
data() {
return {
area: {},
stop: false,
scrollItemNumber: 0,
};
},
methods: {
scroll() {
// 控制什么时间 停顿一下 我用的是 5s停顿一次 这个可以根据自己需求
if (this.scrollItemNumber !== 0 && this.scrollItemNumber % 100 === 0) {
this.stop = true;
setTimeout(() => {
this.stop = false;
this.scrollItemNumber = 0
}, 1000)
}
if (!this.stop) {
this.scrollItemNumber++
console.log(this.scrollItemNumber);
// this.area.scrollHeight / 2 这是滚动所有元素的高度
if (this.area.scrollTop >= this.area.scrollHeight / 2) {
this.area.scrollTop = 0;
} else {
this.area.scrollTop++;
}
}
},
mouseOver() {
this.stop = true;
},
mouseOut() {
this.stop = false;
},
},
};
</script>
<style lang="scss" scoped>
.news {
margin: 20px;
height: 300px;
background: aqua;
text-align: center;
.InfoBox {
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
background: rgb(94, 163, 233);
.item {
margin-top: 30px;
padding: 10px;
background: rgb(54, 230, 83);
text-align: center;
cursor: pointer;
}
}
}
</style>