css/js/vue组件的横向无缝滚动

最新推荐文章于 2024-04-23 16:29:40 发布

云朵里没有喵

最新推荐文章于 2024-04-23 16:29:40 发布

阅读量1.3k

点赞数

文章标签： html vue css javascript

本文链接：https://blog.csdn.net/damiao1023/article/details/119484573

版权

vue组件（vue-seamless-scroll）

演示文档在这里：
https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-switch
这个集成的组件用起来很方便，不过我在做可视化的时候全屏会出现双行的bug，尝试了很多办法后弃用。
在这里插入图片描述

js方法（定时器）

这里也就是用的字符串拼接做的跑马灯，效果差太多了不顺滑。
在这里插入图片描述

  let start = this.msg.substring(0, 1);
  let end = this.msg.substring(1);
  this.msg = end + start;

要做到想要流畅的效果，定时器的话偏移要小，频率要高，一想觉得很复杂遂弃用。

css

想了很久还是决定重回css动画，简单质朴。给个例子展示一下，给个container、inner假设一下我的表格形式，然后设置动画即可。
记得复制一份<span>（很重要，不然没法实现首尾相连）

 <style>
.container{
	width: 100px;
	height: 24px;
	overflow: hidden;
	background-color: aquamarine;
}
.inner{
	width: 500px;
	height : 40px;
	animation: move 2s linear infinite;
}
@keyframes move {
0%{transform: translatex (0px);}
100%{transform: translatex (-100px);}
}
</style>

<body>
	<div class="container">
		<div class="inner">
			<span>这是一串文字</span>
			<span>这是一串文字</span>
		</div>
	</div>
</body>

首尾相连的效果哈
在这里插入图片描述

改bug的一些碎碎念(勿看)

vue-seamless-scroll实现无缝滚动，单独页面显示正常。但通过iframe引入外接页面，再通过webkitRequestFullScreen做全屏按钮，这里的按钮是在数据中心项目中添加的，向左滚动时会出现双行的bug。

解决办法：

1.考虑是不是webkitRequestFullScreen不兼容等问题，尝试click事件绑定其他全屏方法

	(1)单独页面的F11是没问题的，所以尝试直接按钮绑定F11按键。
	结果：尝试后发现F11只能全屏当前页面，不能全屏iframe中对象。（是否有更好解决办法？）

2.考虑是不是iframe组件本身的问题

	(1)换用了<object/>
	结果：无全屏反应，没有细查问题，跳过。
	(2)Jquery引入
	结果：很麻烦，没试。

3.尝试修改组件代码

	强行固定li的高度，并用overflow: hidden;隐掉多余的一行
但是仍无法解决无缝衔接的问题。

4.在原生页面做全屏按钮

	因为原生页面的全屏/非全屏，无缝滚动的效果都是正常的，所以想到直接在原生页面做全屏按钮，数据中心项目直接调用，仍然是双行，失败呜呜。

5.考虑vue-seamless-scroll本身的bug，换一种方法实现无缝滚动。

	(1)[CSS3 实现滚动字幕效果（即跑马灯）](https://www.cnblogs.com/h5n1/archive/2012/03/03/2378397.html)

	marquee的tag已废弃，别用了

	(2)定时器有卡顿状况，不够流畅(上面说过了)

云朵里没有喵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
css/js/vue组件的横向无缝滚动

css/js/vue组件的横向无缝滚动vue组件（vue-seamless-scroll）js方法（定时器）css改bug的一些碎碎念(勿看)vue组件（vue-seamless-scroll）演示文档在这里：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-switch这个集成的组件用起来很方便，不过我在做可视化的时候全屏会出现双行的bug，尝试了很多办法后弃用。js方法（定时器）这
复制链接

扫一扫