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

news/2024/9/24 5:25:02/

需求:没有找到特别好的上下轮播插件-所以自己写了一个简单的demo

一.上下平滑轮播-移入停止-移出继续轮播

javascript"><!--* 消息滚动
-->
<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停顿一次 接着轮播)

javascript"><!--* 消息滚动
-->
<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>


http://www.ppmy.cn/news/1463705.html

相关文章

java新特性(Stream API)

什么是 Stream API? Stream API 是 Java 8 引入的一个用于对集合数据进行函数式编程操作的强大的库。它允许我们以一种更简洁、易读、高效的方式来处理集合数据,可以极大提高 Java 程序员的生产力,是目前为止对 Java 类库最好的补充。 Stream API 的核心思想是将数据处理操作…

【Sql Server】随机查询一条表记录,并重重温回顾下自定义函数的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…

6.Redis之String命令

1.String类型基本介绍 redis 所有的 key 都是字符串, value 的类型是存在差异的~~ 一般来说,redis 遇到乱码问题的概率更小~~ Redis 中的字符串,直接就是按照二进制数据的方式存储的. (不会做任何的编码转换【讲 mysql 的时候,知道 mysql 默认的字符集, 是拉丁文,插入中文…

vite+js配置

vite js 配置路径 npm install types/node --save-dev vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue //需要引入 import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {a…

人类和小鼠转录组上游分析

基础软件 conda install cutadapt, trimmomatic, samtools, hisat2, subread, deeptools -y人类转录组上游分析 # 样本名称 sample_namesample# 线程 threads4# 双端测序原始fastq1和fastq2路径 fastq1_path/path/${sample_name}_1.fq.gz fastq2_path/path/${sample_name}_2.…

vue2 面试题

一、.vue的性能优化怎么做&#xff1f; 1.编码优化&#xff1a; 不要把所有的数据都放在data中&#xff1b;v-for时给每个元素绑定事件用事件代理&#xff1b;keep-alive缓存组件&#xff1b;尽可能拆分组件&#xff0c;提高复用性、维护性&#xff1b;key值要保证唯一&#…

基于SpringBoot+Vue在线动漫信息平台设计和实现(源码+LW+部署讲解)

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; &#x1f339;推荐一个人…

1. lambda初体验

首先声明一个函数式接口&#xff0c;就只接口内只有一个抽象方法 //函数式接口 public interface Factory {Object getObject();}接口实现类 public class SubClass implements Factory {Overridepublic Object getObject() {return new User();}}User类 public class User …