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…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)
在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...
Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程
鸿蒙电脑版操作系统来了,很多小伙伴想体验鸿蒙电脑版操作系统,可惜,鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机,来体验大家心心念念的鸿蒙系统啦!注意:虚拟…...
React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?
系列回顾: 在上一篇《React核心概念:State是什么?》中,我们学习了如何使用useState让一个组件拥有自己的内部数据(State),并通过一个计数器案例,实现了组件的自我更新。这很棒&#…...
