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-封装上下(垂直方向)轮播
需求:没有找到特别好的上下轮播插件-所以自己写了一个简单的demo 一.上下平滑轮播-移入停止-移出继续轮播 <!--* 消息滚动 --> <template><div class"news"><div id"roll" class"InfoBox" mouseover"thi…...
海外私人IP和原生IP有什么区别,谁更有优势?
一、什么是海外私人IP?什么是原生IP? 1、海外私人IP: 海外私人IP是由专门的服务提供商提供的IP地址,这些IP地址通常与特定地理位置或国家相关联。这些IP地址独享私人而不用与其他用户共享。海外私人IP广泛应用与跨境电商中&#x…...
主流容器工具对比以及重点推荐学习的企业级工具
常见的主流容器工具包括但不限于以下几种: 1. Docker: Docker 是最流行的容器平台之一,它允许开发者将应用及其依赖打包到一个轻量级、可移植的容器中,然后可以在任何支持Docker的系统上运行。 2. Kubernetes:Kubern…...
国产linux系统(银河麒麟,统信uos)使用 PageOffice 国产版在线编辑word文件,同时保存数据和文件
PageOffice 国产版 :支持信创系统,支持银河麒麟V10和统信UOS,支持X86(intel、兆芯、海光等)、ARM(飞腾、鲲鹏、麒麟等)芯片架构。 在OA办公、文档流转等各个Web系统中,实现最简单的…...
个人感觉对Material设计有用的几个网址
(一) Modular and customizable Material Design UI components for Android GIthub: material-components-android (二) 学习Material设计 Material Design (三) 用于创建Material主题,支持导出多种格式 material-theme-builder...
ubuntu18 安装sudo
ubuntu18 安装sudo 在Ubuntu 18.04上安装sudo通常是不必要的,因为sudo是Ubuntu及其衍生版本的基本包之一,默认情况下就已经安装。如果出于某种原因,sudo没有预装或者你需要升级到最新版本,你可以通过以下命令安装或更新它&#x…...
【力扣一轮】202.快乐数 1.两数之和
202.快乐数 力扣链接 代码随想录链接 思路 看到这一题没思路,直接看题解。 发现其中一个难点在于“无限循环”,这个字眼可以转换成退出条件。退出条件就有两种,一种是这个数字是快乐数,一种是这个数字不是快乐数。 如果是快…...
Vue小程序项目知识积累(二)
1.wx.reLaunch(Object object) 关闭所有页面,打开到应用内的某个页面。 wx.reLaunch({url:/pages/positons/index}) 参数说明: 属性类型默认值必填说明urlstring是需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之…...
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,在app-imms2放入app-imms2.apk,编译安卓源码即可, 3、编译完会在out/…...
NLP(16)--生成式任务
前言 仅记录学习过程,有问题欢迎讨论 输入输出均为不定长序列(seq2seq)自回归语言模型: x 为 str[start : end ]; y为 [start1 : end 1] 同时训练多个字,逐字计算交叉熵 encode-decode结构: Encoder将输…...
直播回放| 机器人任务挑战赛线上培训资料合集
大赛培训回顾 5月22日,卓翼飞思实验室为全国各赛区精心组织的机器人任务挑战赛(无人协同系统)线上培训第三期顺利落下帷幕,吸引300余人参与。本次培训主要针对仿真平台的基本使用,从仿真平台获取激光雷达/视觉数据&am…...
flask Web应用的接口调试
以上上一篇 Docker部署Azure chatgpt样例应用_群晖部署chatgpt-CSDN博客 xx为例 在app.py最下方有 /conversation 接口 在api.ts文件中可见调用了 /conversation 接口。 使用chrom浏览器F12查看 Networ- 本地运行后,使用postman调试。接口地址填写 http://127.0…...
简单易懂的 API 集成测试方法
简介:API 集成测试的重要性 API 集成测试是一类测试活动,用于验证 API 是否满足功能性、可靠性、性能和安全性等方面的预期要求。在多 API 协作的应用程序中,这种测试尤为紧要。 在这一阶段,我们不仅审视单个组件,还…...
leetcode 239. 滑动窗口最大值、347.前 K 个高频元素
leetcode 239. 滑动窗口最大值、347.前 K 个高频元素 leecode 239. 滑动窗口最大值 题目链接 :https://leetcode.cn/problems/sliding-window-maximum/description/ 题目 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的…...
npm常用指令
基础 命令:run 解释:运行脚本 示例:npm run dev 命令:list || ls 解释:查看依赖列表 示例:npm list || npm ls 命令:install || i 解释:安装依赖 示例:npm install ||…...
数字孪生技术在管理中有哪些实际应用?
随着科学技术的不断提高,数字孪生技术也在不断的从理论应用至现实,并且涉及领域较为广泛。 在生产运营管理层面,通过构建数字孪生模型,企业可以精准模拟和优化生产线,实现生产流程的智能化和高效化。比如,…...
LeetCode/NowCoder-链表经典算法OJ练习3
孜孜不倦:孜孜:勤勉,不懈怠。指工作或学习勤奋不知疲倦。💓💓💓 目录 说在前面 题目一:返回倒数第k个节点 题目二:链表的回文结构 题目三:相交链表 SUMUP结尾 说在前…...
如何理解HTML语义化
如何理解HTML语义化 HTML语义化,简单来说,就是使用HTML标签来清晰地表达页面内容的结构和意义,而不仅仅是作为布局的容器。它强调使用具有明确含义的HTML标签来描述页面元素,而不是仅仅依赖CSS来实现页面的外观和布局。 理解HTM…...
Solved problem: The number of elements in the character array
Problem: 未解决的问题:字符数组中元素的个数-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 添加事件,Sink 将其删除。 1、Memory Channel 事件存储在具有可配置最大大小的内存中队列中。它非常适合需要更高吞吐量的流,但在agent发生故障时会丢失暂存数据 Property Name Default Description type …...
MoE混合专家系统原理与工程实践:稀疏激活如何实现大模型高效推理
1. 项目概述:当“参数规模”不再等于“实际计算量”你可能已经看过不少标题党文章,比如“GPT-4参数量突破1.8万亿!”——但真正值得细品的,是后半句:“它每处理一个词(token),只动用…...
终极免费LRC歌词制作工具:3分钟学会专业歌词同步技巧 [特殊字符]
终极免费LRC歌词制作工具:3分钟学会专业歌词同步技巧 🎵 【免费下载链接】lrc-maker 歌词滚动姬|可能是你所能见到的最好用的歌词制作工具 项目地址: https://gitcode.com/gh_mirrors/lr/lrc-maker 还在为制作歌词同步而烦恼吗&#x…...
JMeter接口测试实战:登录态、参数化、业务链路与签名处理
1. 为什么接口测试不能只靠“点点点”——JMeter不是高级版Postman,而是压测与验证的双刃剑很多人第一次听说JMeter,是在同事甩来一句“你那个接口要压测,用JMeter跑一下”。结果打开软件,看到满屏英文、树形结构、线程组、监听器…...
手把手教你修复‘MsBuild.exe不是内部或外部命令’(附Win10/Win11环境变量配置详解)
手把手教你解决‘MsBuild.exe不是内部或外部命令’问题 第一次在命令行里敲下msbuild却看到系统报错"不是内部或外部命令"时,那种挫败感我至今记忆犹新。作为.NET开发者必备的核心工具,MSBuild的配置问题困扰过无数新手。本文将用最直观的方式…...
计算机视觉毕设避坑指南:从开题到答辩,我踩过的雷和总结的实用工具包(含数据集/模型/部署)
计算机视觉毕设避坑指南:从开题到答辩的实战经验与工具包 第一次接触计算机视觉毕业设计时,我被那些炫酷的论文标题和复杂的模型结构吓得不轻。直到自己真正走完全程,才发现毕设更像是一场马拉松,而不是百米冲刺——重要的不是起步…...
Keil C251中HEX文件生成异常的解决方案
1. 问题现象与背景解析最近在调试基于Intel USB Hub参考设计的嵌入式系统时,遇到一个颇为蹊跷的问题。当我从Intel官网下载了完整的USB Hub设备示例代码(约40多页的C251汇编混合代码),通过Keil Vision环境编译后,生成的…...
hoverboard-firmware-hack-FOC终极兼容性指南:STM32F103RCT6与GD32F103RCT6深度对比
hoverboard-firmware-hack-FOC终极兼容性指南:STM32F103RCT6与GD32F103RCT6深度对比 【免费下载链接】hoverboard-firmware-hack-FOC With Field Oriented Control (FOC) 项目地址: https://gitcode.com/GitHub_Trending/ho/hoverboard-firmware-hack-FOC 想…...
catlass - 让算子开发像搭积木一样简单
昇腾CANN的算子开发,以前是个"体力活"——每个算子都要手写 C 代码,调内存、调流水、调同步,写对了算你厉害,写错了调试三天。 catlass 要解决的就是这个问题:把算子开发从"手写汇编"变成"搭…...
App抓包网络异常的三层防御机制与排查四步法
1. 这不是网络问题,是App在主动拦截你“App 抓包提示网络异常”——这句话我去年在三个不同客户的现场都听过。第一次是在某电商App的测试环境里,测试同学说“Fiddler一开,登录就报‘网络连接失败’,关掉就一切正常”;…...
2026 年一人公司创业热潮:政策与 AI 驱动,机遇背后暗藏风险
一人公司创业热潮来袭:政策与 AI 双驱动,机遇背后暗藏风险从苏州到深圳,从成都到上海,一种名为 OPC(One Person Company,一人公司)的创业范式正以前所未有的速度席卷全国。数据为证:…...
