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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/18235.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Media Encoder 2024 for Mac媒体编码器安装教程ME2024安装包下载

安装 步骤 1&#xff0c;双击打开下载好的安装包。 2&#xff0c;选择install ame_24...双击打开启动安装程序。 3&#xff0c;点击install。 4&#xff0c;输入电脑密码。 5&#xff0c;软件安装中... 6&#xff0c;安装结束点击好。 7&#xff0c;返回打开的镜像 选择激活补…

零基础,想做一名网络安全工程师,该怎么学习?

​ 相比IT类的其它岗位&#xff0c;网络工程师的学习方向是比较明亮的。想要成为网络工程师&#xff0c;华为认证就是最好的学习方法。而网络工程师的从零开始学习就是从华为认证的初级开始学起&#xff0c;也就是HCIA&#xff0c;也就是从最基本的什么是IP地址、什么是交换机这…

响应式流和reactor框架进阶

响应式流和reactor框架进阶 响应式流创建、转换、处理 本文档主要介绍在响应式编程中如何从流中获取数据并处理。 前提条件 假设您已经能掌握Java基础、Maven使用、Lamda表达式、响应式编程等基础。 如何获取流中数据 &#x1f30f; 说明 1、不要试图从流中获取数据出来&a…

第⼀次页⾯加载会触发哪⼏个钩⼦?DOM 渲染在哪个周期中就已经完成?

在Vue中&#xff0c;第一次页面加载会触发以下钩子函数&#xff1a; beforeCreate&#xff1a;在实例初始化之后&#xff0c;数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created&#xff1a;在实例创建完成后被立即调用。在这一步&#xff0c;实例已完成…

Angular(1):使用Angular CLI创建空项目

要创建一个空的 Angular 项目&#xff0c;可以使用 Angular CLI&#xff08;命令行界面&#xff09;。以下是使用 Angular CLI 创建一个新项目的步骤&#xff1a; 1、安装 Angular CLI&#xff1a; 打开你的命令行界面&#xff08;在 Windows 上是 CMD、PowerShell 或 Git Bas…

使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心 介绍效果代码 介绍 使用numpy与matplotlib绘制一个七彩爱心&#xff01; 效果 代码 import numpy as np import matplotlib.pyplot as plt# Heart shape function def heart_shape(t):x 16 * np.sin(t)**3y 13 * np.cos(t) - 5 * np.cos…

【Python设计模式07】工厂方法模式

工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使得一个类的实例化延迟到其子类。通过使用工厂方法模式&#xff0c;可以将对象的创建过程与使用…

微软:最新ChatGPT-4o模型,可在 Azure OpenAI上使用

北京时间5月14日凌晨&#xff0c;OpenAI 一场不到 30 分钟的发布会&#xff0c;正式发布了 GPT-4o&#xff0c;视频语音交互丝滑到吓人&#xff0c;还即将免费可用&#xff01; GPT-4o&#xff0c;其中的「o」代表「omni」&#xff08;即全面、全能的意思&#xff09;&#xff…

如何通过locust进行全链路压测

通过Locust进行全链路压测的具体步骤 Locust是一个开源的性能测试工具&#xff0c;支持分布式压测和高并发测试。它基于Python编写&#xff0c;使用方便且功能强大。本文将详细介绍如何使用Locust进行全链路压测&#xff0c;包括准备工作、测试脚本编写、压测执行和结果分析等…

BIO从提交到执行完毕过程分析

1.上层调用submit_bio()向块设备层提交IO请求,q->make_request_fn()=>__make_request()被调用,将BIO合并到已有的request或为BIO新分配一个request. 2.调用elv_merge(),首先尝试是否可以和上一次合并的request进行合并,如果不能合并,调用IO调度器提供的合并函数,尝试与I…

AIGC行业:巨头引领的创新浪潮与市场前景

AIGC&#xff08;AI Generated Content&#xff09;技术&#xff0c;作为新兴的技术力量&#xff0c;正逐渐改变内容创作的生态。在这一变革中&#xff0c;国内科技巨头如百度、阿里巴巴、腾讯等的积极参与&#xff0c;不仅为行业带来资本和技术支持&#xff0c;更预示着AIGC技…

react 下拉框内容回显

需要实现效果如下 目前效果如下 思路 : 将下拉框选项的value和label一起存储到state中 , 初始化表单数据时 , 将faqType对应的label查找出来并设置到Form.Item中 , 最后修改useEffect 旧代码 //可以拿到faqType为0 但是却没有回显出下拉框的内容 我需要faqType为0 回显出下拉…

Shell脚本基本命令

文件名后缀.sh 编写shell脚本一定要说明一下在#&#xff01;/bin/bash在进行编写。命令选项空格隔开。Shell脚本是解释的语言&#xff0c;bash 文件名即可打印出编写的脚本。chmod给权限命令。如 chmod 0777 文件名意思是给最高权限。 注意:count赋值不能加空格。取消变量可在变…

如何提升网络性能监控和流量回溯分析的效率?

目录 什么是网络性能监控&#xff1f; 网络性能监控的关键指标 什么是流量回溯分析&#xff1f; 流量回溯分析的应用场景 网络性能监控与流量回溯分析的结合 实例应用&#xff1a;AnaTraf网络流量分析仪 如何选择适合的网络性能监控和流量回溯分析工具&#xff1f; 结论…

MQTT 5.0 报文解析 06:AUTH

欢迎阅读 MQTT 5.0 报文系列 的最后一篇文章。在上一篇中&#xff0c;我们已经介绍了 MQTT 5.0 的 DISCONNECT 报文。现在&#xff0c;我们将介绍 MQTT 中的最后一个控制报文&#xff1a;AUTH。 MQTT 5.0 引入了增强认证特性&#xff0c;它使 MQTT 除了简单密码认证和 Token 认…

Vue3实战笔记(36)—粒子特效完成炫酷的404

文章目录 前言404特效总结 前言 昨天介绍了一个粒子特效小例子&#xff0c;不够直观&#xff0c;下面直接实战在自己的项目中实现一个好玩滴。 404特效 更改之前创建好的404.vue: <template><div class"container"><vue-particles id"tspartic…

阿里云和AWS的CDN产品对比分析

在现代互联网时代,内容分发网络(CDN)已成为确保网站和应用程序高性能和可用性的关键基础设施。作为两家领先的云服务提供商,阿里云和Amazon Web Services(AWS)都提供了成熟的CDN解决方案,帮助企业优化网络传输和提升用户体验。我们九河云一直致力于阿里云和AWS云相关业务&#…

【光伏干货】光伏无人机巡检步骤

随着光伏产业的迅速发展和无人机技术的日益成熟&#xff0c;光伏无人机巡检已成为提高光伏电站运维效率、降低运维成本的重要手段。本文将详细介绍光伏无人机巡检的步骤&#xff0c;帮助读者更好地理解和应用这一技术。 一、前期准备 1、设备检查&#xff1a;对无人机及其相关…

mysql内存和磁盘的关系

mysql内存和磁盘的关系 1.MySQL的内存和磁盘之间的关系是密切的。MySQL的数据存储在磁盘上&#xff0c;但为了高效地执行查询操作&#xff0c;它也会将数据页&#xff08;每个页通常为16KB&#xff09;读入内存。MySQL的缓冲池&#xff08;buffer pool&#xff09;是在内存中的…

谷歌插件编写

目录 manifest.json {"manifest_version": 3,"name": "Floating Ball","version": "1.0","description": "A floating ball on the right side of the webpage.","permissions": ["act…