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

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>

相关文章:

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

需求&#xff1a;没有找到特别好的上下轮播插件-所以自己写了一个简单的demo 一.上下平滑轮播-移入停止-移出继续轮播 <!--* 消息滚动 --> <template><div class"news"><div id"roll" class"InfoBox" mouseover"thi…...

海外私人IP和原生IP有什么区别,谁更有优势?

一、什么是海外私人IP&#xff1f;什么是原生IP&#xff1f; 1、海外私人IP&#xff1a; 海外私人IP是由专门的服务提供商提供的IP地址&#xff0c;这些IP地址通常与特定地理位置或国家相关联。这些IP地址独享私人而不用与其他用户共享。海外私人IP广泛应用与跨境电商中&#x…...

主流容器工具对比以及重点推荐学习的企业级工具

常见的主流容器工具包括但不限于以下几种&#xff1a; 1. Docker&#xff1a; Docker 是最流行的容器平台之一&#xff0c;它允许开发者将应用及其依赖打包到一个轻量级、可移植的容器中&#xff0c;然后可以在任何支持Docker的系统上运行。 2. Kubernetes&#xff1a;Kubern…...

国产linux系统(银河麒麟,统信uos)使用 PageOffice 国产版在线编辑word文件,同时保存数据和文件

PageOffice 国产版 &#xff1a;支持信创系统&#xff0c;支持银河麒麟V10和统信UOS&#xff0c;支持X86&#xff08;intel、兆芯、海光等&#xff09;、ARM&#xff08;飞腾、鲲鹏、麒麟等&#xff09;芯片架构。 在OA办公、文档流转等各个Web系统中&#xff0c;实现最简单的…...

个人感觉对Material设计有用的几个网址

(一) Modular and customizable Material Design UI components for Android GIthub: material-components-android (二) 学习Material设计 Material Design (三) 用于创建Material主题&#xff0c;支持导出多种格式 material-theme-builder...

ubuntu18 安装sudo

ubuntu18 安装sudo 在Ubuntu 18.04上安装sudo通常是不必要的&#xff0c;因为sudo是Ubuntu及其衍生版本的基本包之一&#xff0c;默认情况下就已经安装。如果出于某种原因&#xff0c;sudo没有预装或者你需要升级到最新版本&#xff0c;你可以通过以下命令安装或更新它&#x…...

【力扣一轮】202.快乐数 1.两数之和

202.快乐数 力扣链接 代码随想录链接 思路 看到这一题没思路&#xff0c;直接看题解。 发现其中一个难点在于“无限循环”&#xff0c;这个字眼可以转换成退出条件。退出条件就有两种&#xff0c;一种是这个数字是快乐数&#xff0c;一种是这个数字不是快乐数。 如果是快…...

Vue小程序项目知识积累(二)

1.wx.reLaunch(Object object) 关闭所有页面&#xff0c;打开到应用内的某个页面。 wx.reLaunch({url:/pages/positons/index}) 参数说明&#xff1a; 属性类型默认值必填说明urlstring是需要跳转的应用内页面路径 (代码包路径)&#xff0c;路径后可以带参数。参数与路径之…...

RK3588 Android13 预安装自己的apk应用及把这个应用设置为默认桌面

1、cp -rf device/rockchip/rk3588/rk3588m_s/preinstall device/rockchip/rk3588/rk3588_t/ 2、给device/rockchip/rk3588/rk3588_t/preinstall/的存放app的文件夹改名为app-imms2&#xff0c;在app-imms2放入app-imms2.apk,编译安卓源码即可&#xff0c; 3、编译完会在out/…...

NLP(16)--生成式任务

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 输入输出均为不定长序列&#xff08;seq2seq&#xff09;自回归语言模型&#xff1a; x 为 str[start : end ]; y为 [start1 : end 1] 同时训练多个字&#xff0c;逐字计算交叉熵 encode-decode结构&#xff1a; Encoder将输…...

直播回放| 机器人任务挑战赛线上培训资料合集

大赛培训回顾 5月22日&#xff0c;卓翼飞思实验室为全国各赛区精心组织的机器人任务挑战赛&#xff08;无人协同系统&#xff09;线上培训第三期顺利落下帷幕&#xff0c;吸引300余人参与。本次培训主要针对仿真平台的基本使用&#xff0c;从仿真平台获取激光雷达/视觉数据&am…...

flask Web应用的接口调试

以上上一篇 Docker部署Azure chatgpt样例应用_群晖部署chatgpt-CSDN博客 xx为例 在app.py最下方有 /conversation 接口 在api.ts文件中可见调用了 /conversation 接口。 使用chrom浏览器F12查看 Networ- 本地运行后&#xff0c;使用postman调试。接口地址填写 http://127.0…...

简单易懂的 API 集成测试方法

简介&#xff1a;API 集成测试的重要性 API 集成测试是一类测试活动&#xff0c;用于验证 API 是否满足功能性、可靠性、性能和安全性等方面的预期要求。在多 API 协作的应用程序中&#xff0c;这种测试尤为紧要。 在这一阶段&#xff0c;我们不仅审视单个组件&#xff0c;还…...

leetcode 239. 滑动窗口最大值、347.前 K 个高频元素

leetcode 239. 滑动窗口最大值、347.前 K 个高频元素 leecode 239. 滑动窗口最大值 题目链接 &#xff1a;https://leetcode.cn/problems/sliding-window-maximum/description/ 题目 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的…...

npm常用指令

基础 命令&#xff1a;run 解释&#xff1a;运行脚本 示例&#xff1a;npm run dev 命令&#xff1a;list || ls 解释&#xff1a;查看依赖列表 示例&#xff1a;npm list || npm ls 命令&#xff1a;install || i 解释&#xff1a;安装依赖 示例&#xff1a;npm install ||…...

数字孪生技术在管理中有哪些实际应用?

随着科学技术的不断提高&#xff0c;数字孪生技术也在不断的从理论应用至现实&#xff0c;并且涉及领域较为广泛。 在生产运营管理层面&#xff0c;通过构建数字孪生模型&#xff0c;企业可以精准模拟和优化生产线&#xff0c;实现生产流程的智能化和高效化。比如&#xff0c;…...

LeetCode/NowCoder-链表经典算法OJ练习3

孜孜不倦&#xff1a;孜孜&#xff1a;勤勉&#xff0c;不懈怠。指工作或学习勤奋不知疲倦。&#x1f493;&#x1f493;&#x1f493; 目录 说在前面 题目一&#xff1a;返回倒数第k个节点 题目二&#xff1a;链表的回文结构 题目三&#xff1a;相交链表 SUMUP结尾 说在前…...

如何理解HTML语义化

如何理解HTML语义化 HTML语义化&#xff0c;简单来说&#xff0c;就是使用HTML标签来清晰地表达页面内容的结构和意义&#xff0c;而不仅仅是作为布局的容器。它强调使用具有明确含义的HTML标签来描述页面元素&#xff0c;而不是仅仅依赖CSS来实现页面的外观和布局。 理解HTM…...

Solved problem: The number of elements in the character array

Problem: 未解决的问题&#xff1a;字符数组中元素的个数-CSDN博客 Solution: Add \0 at the end of the character array More detailed content can be found in the link below. Sizeof and Length of character array-CSDN博客...

Flume Channels简介及官方用例

通道是在代理上暂存事件的存储库。Source 添加事件&#xff0c;Sink 将其删除。 1、Memory Channel 事件存储在具有可配置最大大小的内存中队列中。它非常适合需要更高吞吐量的流&#xff0c;但在agent发生故障时会丢失暂存数据 Property Name Default Description type …...

机器学习模型监控实战:KS检验与BC系数在大数据供应链预测中的应用

1. 项目概述&#xff1a;为什么模型上线后&#xff0c;监控比训练更重要&#xff1f;在机器学习项目里&#xff0c;我们常常把80%的精力花在数据清洗、特征工程和模型调优上&#xff0c;觉得模型一旦上线&#xff0c;任务就完成了。但真实的生产环境会给你上一课&#xff1a;一…...

C#巧用Spire.XLS for .NET隐藏或显示Excel网格线

在日常的数据处理和报表生成中&#xff0c;Excel是我们不可或缺的工具。然而&#xff0c;你是否曾遇到这样的场景&#xff1a;辛苦制作的报表&#xff0c;因为默认显示的网格线而显得不够专业&#xff0c;或是某些数据可视化图表&#xff0c;网格线反而成了干扰&#xff1f;手动…...

告别眨眼误判!用Python+OpenCV优化人脸68关键点疲劳检测的3个实用技巧

告别眨眼误判&#xff01;用PythonOpenCV优化人脸68关键点疲劳检测的3个实用技巧在计算机视觉应用中&#xff0c;人脸关键点检测一直是热门研究方向。特别是68关键点检测技术&#xff0c;因其在表情识别、疲劳监测等场景中的实用性而备受关注。然而&#xff0c;许多开发者在实际…...

在WSL2的Ubuntu 22.04上,用Intel OneAPI 2024完整配置VASP 6.3.2计算环境

在WSL2的Ubuntu 22.04上搭建Intel OneAPI 2024与VASP 6.3.2混合计算环境 对于使用Windows系统却需要运行Linux计算软件的材料模拟研究者而言&#xff0c;WSL2的出现彻底改变了跨平台科研的工作流。本文将手把手带你完成从零开始配置VASP 6.3.2的全过程&#xff0c;特别针对2024…...

Unity手游Mono堆泄漏:80MB硬限下的静默崩溃真相

1. 这不是GC没跑&#xff0c;是Mono堆在 silently 溢出——一个被90% Unity手游团队忽视的“假稳定”现象你有没有遇到过这样的情况&#xff1a;游戏在编辑器里跑得飞快&#xff0c;Profiler显示GC调用次数极少&#xff0c;内存曲线平滑得像湖面&#xff1b;但一打包到Android真…...

事件相机预处理芯片:基于混合内存计算的图像恢复与区域提取

1. 项目概述&#xff1a;为事件相机打造一颗“聪明”的本地大脑如果你接触过机器人、自动驾驶或者智能监控&#xff0c;大概率听说过“事件相机”&#xff08;Event-based Camera&#xff09;&#xff0c;或者更学术一点的名字——神经形态视觉传感器。和咱们手机里每秒拍几十张…...

语音“下一首“控制车载音乐播放!

V1.0一个android apk&#xff0c;这个app可以监听手机的语音&#xff0c;然后我可以发语音来控制播放下一首歌曲&#xff0c;给语音指令&#xff0c;下一个&#xff0c;就会在酷狗音乐上播放下一首歌曲。节省点击的操作&#xff0c;因为在车上手去点击&#xff0c;影响开车。V1…...

Unity C#不是编程语言,而是与引擎对话的指令系统

1. 这不是“学编程”&#xff0c;而是重新建立你和计算机对话的语法体系很多人点开这个标题&#xff0c;心里想的是&#xff1a;“不就是写几行代码嘛&#xff0c;网上教程多的是。”我带过三十多个零基础学员做 Unity 小项目&#xff0c;其中超过 21 人卡在同一个地方——不是…...

Unity C#方法设计实战:从参数传递到跨脚本调用

1. 这不是语法课&#xff0c;是写代码时每天要面对的“沟通现场”刚带完一批Unity新手做小项目&#xff0c;有个现象特别明显&#xff1a;很多人能背出“方法就是函数”“参数分值传递和引用传递”&#xff0c;但一到实际写代码就卡壳——比如想让角色跳跃时播放音效&#xff0…...

Insomnia终极指南:构建高效API测试与协作的完整工作流

Insomnia终极指南&#xff1a;构建高效API测试与协作的完整工作流 【免费下载链接】insomnia The open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage. 项目地址: https://gitcode.com/gh_mirrors/in/…...