首页使用栅格布局超出宽度为什么会有横向滑块

使用栅格布局超出宽度为什么会有横向滑块

时间: 2024-05-30 22:16:29 浏览: 116

Vue替代marquee标签超出宽度文字横向滚动效果

【Vue替代marquee标签实现文字滚动效果】在现代前端开发中，由于HTML5不推荐使用`<marquee>`标签，因为它被认为是过时且不标准的元素。为了在Vue项目中实现类似的效果，我们可以借助自定义组件或者第三方库来创建一个横向滚动的文字效果。下面将详细介绍如何使用Vue来替代`<marquee>`标签实现这一功能。 ### 1. 使用npm安装组件如果你想要使用已有的开源组件，可以通过npm来安装。例如，你可以安装名为`marquee-components`的包，这将提供一个易于集成到Vue项目的滚动组件。在命令行中输入： ```bash npm i marquee-components ``` 安装完成后，在`main.js`文件中导入并全局注册组件： ```javascript import marquee from 'marquee-components' Vue.use(marquee) ``` 接着在你的Vue组件模板中使用这个组件： ```html <template> <div id="app"> <marquee :val="msg"></marquee> </div> </template> <script> export default { name: 'app', data() { return { msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue' } } } </script> ``` 在这里，`:val`属性用于传递需要滚动的文字，当文字的总长度超过容器宽度时，就会自动触发横向滚动效果。 ### 2. 自定义Vue组件实现滚动效果如果不使用第三方组件，我们也可以自己编写一个Vue组件来实现滚动效果。以下是一个简单的例子： ```html <template> <div class="marquee-wrap"> <div class="scroll"> <p class="marquee">{{text}}</p> <p class="copy"></p> </div> <p class="getWidth">{{text}}</p> </div> </template> <script> export default { name: 'marquee', props: ['val'], data() { return { timer: null, text: '' } }, created() { const timer = setTimeout(() => { this.move() clearTimeout(timer) }, 1000) }, mounted() { for (let item of this.val) { this.text += ' ' + item } }, methods: { move() { const maxWidth = document.querySelector('.marquee-wrap').clientWidth const width = document.querySelector('.getWidth').scrollWidth if (width <= maxWidth) return const scroll = document.querySelector('.scroll') const copy = document.querySelector('.copy') copy.innerText = this.text let distance = 0 this.timer = setInterval(() => { distance -= 1 if (-distance >= width) { distance = 16 } scroll.style.transform = `translateX(${distance}px)` }, 20) } }, beforeDestroy() { clearInterval(this.timer) } } </script> <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee { margin-right: 16px; } p { word-break: keep-all; white-space: nowrap; font-size: 16px; font-family: "微软雅黑 Light"; } .scroll { display: flex; } .getWidth { word-break: keep-all; white-space: nowrap; position: absolute; opacity: 0; top: 0; } </style> ``` 这个自定义组件接收`val`属性作为输入值，然后在`mounted`钩子中初始化文本，并在`created`钩子中设置定时器来实现滚动效果。在`beforeDestroy`钩子中清除定时器，防止内存泄漏。 ### 总结通过以上两种方式，你可以用Vue实现类似`<marquee>`标签的文字滚动效果，同时保持代码的可维护性和兼容性。在实际开发中，可以根据项目需求选择合适的方法，确保用户体验的同时遵循最佳实践。在使用过程中，还可以根据实际需要调整滚动速度、方向、延迟时间等参数，以达到理想的滚动效果。

栅格布局是一种基于网格系统的布局方式，它将页面划分为多个列和行，可以方便地对页面进行布局。当使用栅格布局时，如果内容超出了容器的宽度，就会出现横向滑块。这是因为栅格布局中的列有固定的宽度，当内容超出列的宽度时，就会溢出到下一列或者下一行，导致容器的宽度增加，从而出现滑块。为了避免这种情况，可以使用响应式设计或者调整栅格布局中列的宽度，使其适应不同的屏幕大小和设备。

阅读全文

最新推荐

实例讲解DataTables固定表格宽度(设置横向滚动条)

Apache RocketMQ Go客户端：全面支持与消息处理功能

使用栅格布局超出宽度为什么会有横向滑块

相关推荐

jQuery全屏横向时间轴滑块代码

实例讲解DataTables固定表格宽度(设置横向滚动条)

jquery按钮控制横向滑块图片滚动展示_拖动滑块图片滚动展示.rar

横向、竖向以拖入图片最大宽度和高度来计算横向的宽度和高度X贴图处理器.exe

jQuery横向手风琴图片滑块

横向手风琴图片滑块.zip

jQuery全屏横向时间轴滑块特效代码

html5全屏横向时间轴滑块代码

qt双向滑块—横向和纵向

jQuery横向手风琴图片滑块.zip

jQuery全屏横向时间轴滑块代码.zip

jQuery全屏横向时间轴滑块代码.rar

jquery全屏滑块拖动横向图片滚动.zip

jquery全屏滑块拖动横向图片滚动特效代码

QT自绘滑条控件Slider，可设置横向和纵向，单滑块或者双滑块

经典可重用滑块代码，支持横向和纵向

电信设备-一种滑块横向移动结构.zip

微信小程序，小程序商城，商城，springboot框架，vue管理系统，java后台.zip

最新推荐

实例讲解DataTables固定表格宽度(设置横向滚动条)

利用纯css实现table固定列与表头中间横向滚动的思路和实例

Android中使用GridLayout网格布局来制作简单的计算器App

vue组件横向树实现代码

Android GridView实现横向列表水平滚动

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能