vue 消息左右滚动(前后无缝衔接)
演示效果

封装的组件
<!--* @Author:* @Date: 2024-03-21 19:21:58* @LastEditTime: 2024-03-21 20:31:50* @LastEditors: Please set LastEditors* @Description: 消息左右滚动
-->
<template><divid="textScroll"class="text-scroll"@mousemove="inBox"@mouseleave="leaveBox"><divv-for="i in 2":id="'scrollItem' + i":key="'scrollItem' + i"class="scroll-item":style="{ display: i === 1 ? 'flex' : 'none' }"><slot></slot></div></div>
</template><script>
export default {components: {},data() {return {left: 0,textScrollDiv: null,timer: null,scrollItemWidth: 0,isScroll: false};},computed: {},destroyed() {clearInterval(this.timer);},mounted() {const that = this;this.$nextTick(() => {that.textScrollDiv = document.querySelector('#textScroll');that.scrollItemWidth = document.querySelector('#scrollItem1').clientWidth;const outerBoxWidth = that.textScrollDiv.clientWidth;if (outerBoxWidth < that.scrollItemWidth) {this.isScroll = true;that.textScrollDiv.style.width = `${that.scrollItemWidth * 2}px`;that.timer = setInterval(function() {that.moveLeft();}, 30);document.querySelector('#scrollItem2').style.display = 'flex';}});},methods: {moveLeft() {if (this.textScrollDiv) {this.left -= 1;if (Math.abs(this.left) > this.scrollItemWidth) {this.left = 0;}this.textScrollDiv.style.transform = `translate(${this.left}px, 0px)`;}},// 鼠标划入区域inBox() {if (this.isScroll) {clearInterval(this.timer);this.timer = null;}},// 鼠标离开区域leaveBox() {if (this.isScroll) {const that = this;this.timer = setInterval(function() {that.moveLeft();}, 30);}}}
};
</script>
<style lang="less" scoped>
.text-scroll {display: flex;flex-wrap: nowrap;transition: all 0ms ease-in 0s;.scroll-item {display: flex;flex-wrap: nowrap;}
}
</style>
外部引用
<template><!-- 公告信息板块 --><div v-if="noticeInfo && noticeInfo.length > 0" class="notice-plate"><div class="plate-body"><div class="plate-icon"><i class="sxqyjj-iconfont sxqyjj-xiaoxi1"></i></div><div class="plate-info" @click="handleInfo($event)"><textScroll><divv-for="(item, i) in noticeInfo":key="'notice' + i"class="info-item":data-my-id="item.id">{{ item.title }}<div v-if="i < noticeInfo.length - 1" class="line-split"></div></div></textScroll></div><div class="plate-more" @click="moreInfo">更多<i class="sxqyjj-iconfont sxqyjj-chevron-right"></i></div></div></div>
</template>
<script>
import textScroll from '@packages/views/components/text-scroll/index.vue';export default {name: 'Index',components: {textScroll},data() {return {noticeInfo: [],};},created() {this.getLastThreeConsultation();},methods: {// 获取重点资讯getLastThreeConsultation() {this.$api['search/getLastThreeConsultation']().then(res => {if (res.code === this.$constant.apiServeCode.SUCCESS_CODE) {this.noticeInfo = res.data || [];}return true;}).catch(err => {console.log(err);});}}}
};
</script>
<style lang="less" scoped>
/* stylelint-disable */.notice-plate {width: 1328px;margin: 0 auto;margin-top: 24px;.plate-body {display: flex;align-items: flex-start;width: 100%;height: 48px;padding: 10px 16px;margin-left: -64px;background: white;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 4px 4px 4px 4px;.plate-icon {width: 28px;height: 28px;margin-right: 16px;line-height: 28px;color: rgba(255, 143, 31, 1);text-align: center;background: rgb(255, 247, 241);border-radius: 4px 4px 4px 4px;}.plate-info {width: calc(100% - 112px);height: 28px;overflow: hidden;line-height: 28px;.info-item {position: relative;margin-right: 32px;font-weight: 500;white-space: nowrap;&:hover {color: rgba(0, 128, 255, 1);cursor: pointer;}}.line-split {position: absolute;top: 6px;right: -16px;width: 2px;height: 12px;border-right: 1px solid rgba(217, 217, 217, 1);}}.plate-more {height: 28px;margin-left: 16px;font-size: 14px;line-height: 28px;color: @text-2;cursor: pointer;i {margin-left: 4px;}}}
}
</style>
相关文章:
vue 消息左右滚动(前后无缝衔接)
演示效果 封装的组件 <!--* Author:* Date: 2024-03-21 19:21:58* LastEditTime: 2024-03-21 20:31:50* LastEditors: Please set LastEditors* Description: 消息左右滚动 --> <template><divid"textScroll"class"text-scroll"mousemove&…...
Qt如何直接处理系统事件(比如鼠标事件),而不是post事件
#include <QtGui/5.15.2/QtGui/qpa/qwindowsysteminterface.h> // 方便调试事件 QWindowSystemInterface::setSynchronousWindowSystemEvents(true); 直接再 qWindowsWndProc函数中处理 通常情况: 事件被放到一个队列中...
Web前端笔记+表单练习+五彩导航
一、笔记 表单:数据交互的一种方式 登录、注册、搜索 <from> <input type""> --- <input type"text"> --- 普通输入框,内容在一行显示 <input type"password"> --- 密码框 <input type"…...
软件架构和基于架构的软件开发方法知识总结
一、软件架构定义 软件架构为软件系统提供了一个结构、行为和属性的高级抽象 软件架构是一种表达,使软件工程师能够: (1)分析设计在满足所规定的需求方面的有效性 (2)在设计变更相对容易的阶段,…...
环信新版单群聊UIKit集成指南——Android篇
前言 环信新版UIKit已重磅发布!目前包含单群聊UIKit、聊天室ChatroomUIKit,本文详细讲解Android端单群聊UIKit的集成教程。 环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 UI 组件库,提供各种组件实现会话列表、聊天界…...
最细致最简单的 Arm 架构搭建 Harbor
更好的阅读体验:点这里 ( www.doubibiji.com ) ARM离线版本安装 官方提供了一个 arm 版本,但是好久都没更新了,地址:https://github.com/goharbor/harbor-arm 。 也不知道为什么不更新,我看…...
mysql基础02
1.常用函数 字符串处理函数 length(str) 统计字符长度char_length(str) 统计以(单个字符为单位)的字符长度ucase/upper(str) 小写变大写lcase/lower(str) 大写变小写substr(s,start,end) 从s截start到end的字符串instr(str,"str1") str1在str的位置是? trim(str) 去…...
css的box-shadow详解
CSS的box-shadow属性用于在元素框上添加阴影效果。它可以为元素提供外阴影或内阴影,并且可以控制阴影的颜色、偏移距离、模糊半径以及扩展半径。 box-shadow属性的基本语法如下: box-shadow: h-shadow v-shadow blur spread color inset;下面是各个参数…...
递归的个人总结
递归函数(递去、回归)是函数不断的调用自己; 可以按照如下来理解:func1中调用func2,func2中调用func3; func3函数返回了,继续执行func2中的语句;func2执行完了,继续执行func1之后的…...
使用PDFBox调整PDF每页格式
目录 一、内容没有图片 二、内容有图片 maven依赖,这里使用的是pdfbox的2.0.30版本 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.30</version></dependency>…...
【3D reconstruction 学习笔记】
三维重建 3D reconstruction 1. 相机几何针孔相机摄像机几何 2. 相机标定线性方程组的解齐次线性方程组的解非线性方程组的最小二乘解透镜相机标定带畸变的相机标定 3. 单视图重建2D平面上的变换3D空间上的变换单视测量无穷远点 无穷远线 无穷远平面影消点 影消线单视重构 4. 三…...
(附源码)基于Spring Boot与Vue的宠物用品销售系统设计与实现
前言 💗博主介绍:✌专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 2024年Java精品实战案例《100套》 🍅文末获取源码联系🍅 ἱ…...
Qwen及Qwen-audio大模型微调项目汇总
Qwen及Qwen-audio可微调项目调研 可用来微调方法/项目汇总ps.大语言模型基础资料 可用来微调方法/项目汇总 Qwen github 项目自带的finetune脚本 可以参考https://blog.csdn.net/qq_45156060/article/details/135153920PAI-DSW中微调千问大模型(阿里云的一个产品&a…...
浅析ArcGis中的软件——ArcMap、ArcScene、 ArcGlobe、ArcCatalog
为什么要写这么一篇介绍ArcGis的文章呢?因为大部分人也包括ArcGisdada,在使用ArcMap应用程序创建工程时总以为我们就是使用了ArcGis这个软件的所有。其实不然,在后期的接触和使用中慢慢发现原来ArcMap只是ArcGis这个综合平台的一部分…...
AndroidStudio插件出现“Compatible with IntelliJ IDEA only“错误时的解决方案
原因:插件比较老,配置可能存在问题 1.修改plugins文件夹下的jar包(插件) 找到AndroidStudio所在位置 打开plugins文件夹,找到需要修改的jar包,通过压缩软件用zip方式打开,找到\META-INF\plugin.xml并编辑,在<version>xxxx</versi…...
探索未来的编程趋势与挑战
摘要: 本文将探讨未来编程领域可能面临的挑战和发展趋势,包括人工智能、量子计算、区块链等新兴技术对编程的影响,以及程序员需要具备的新技能和素质。 随着人工智能技术的快速发展,机器学习、深度学习等算法在编程领域的应用越来…...
第十二届蓝桥杯省赛CC++ 研究生组
十二届省赛题 第十二届蓝桥杯省赛C&C 研究生组-卡片 第十二届蓝桥杯省赛C&C 研究生组-直线 第十二届蓝桥杯省赛C&C 研究生组-货物摆放 第十二届蓝桥杯省赛C&C 研究生组-路径 第十二届蓝桥杯省赛C&C 研究生组-时间显示 第十二届蓝桥杯省赛C&C 研究生组…...
Ubuntu自启GUI程序
问题描述 最近搞了一个项目,程序需要自动启动,系统是Ubuntu,先搞了成服务方式(配置的文章很多,可以自己找找),程序还是不启动 ,最后加到/etc/rc.local文件里面启动,看调试信息,需要…...
【光标精灵】让您享受鼠标皮肤多样化快捷更换
鼠标作为我们日常使用频率最高的“小伙伴”,扮演着至关重要的角色。尤其是在女生群体中,对于打造一个个性化、可爱的电脑桌面和软件界面的需求日益增长。然而,尽管电脑默认提供了一些可更换的光标图案,但仍显得有些单调和呆板。想…...
Vue 常见面试题(一)
目录 1、Vue 的最大的优势是什么?(必会) 2、Vue 和 jQuery 两者之间的区别是什么?(必会) 3、MVVM 和 MVC 区别是什么?哪些场景适合?(必会) 1、基本定义 2…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
