vue 消息左右滚动(前后无缝衔接)

2024-03-23 05:20

本文主要是介绍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 消息左右滚动(前后无缝衔接)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/837269

相关文章

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F