当前位置：首页 > news >正文

vue-封装上下(垂直方向)轮播

news 来源：原创 2024/9/19 11:22:17

需求：没有找到特别好的上下轮播插件-所以自己写了一个简单的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>