新闻滚动插件

最近接到这样一个需求,一个列表需要有下下滚动出现的效果。刚开始还觉得很简单,不就是swiper,这个我会用。进一步了解,发现这个列表是实时变化的,就是说里面的条目会增加也会减少。我的天呀,我对swiper了解也不是很深,每次都是去巴拉文档的,这次我发现不啥也巴拉不出来,可能是自己巴拉文档的能力又下降了。

关键是我也不知道这种插件名字应该叫什么呀,我在网上搜来搜去,还是没找到。说实话,这种场景,生活中还是挺常见的,我就在社区医院接种疫苗的大屏幕上见过,它会滚动播放每个接种后留观人员的信息,如果超过了半小时就不会再出现了。可是我竟然找不到这样的插件。干了小十年的前端,我也一次都没有遇到过这样的需求。还是场景接触的不够呀!!

经过了小半天的搜索无果,只能自己实现了。定了一个实现的目标:

  1. 向下滚动
  2. 可以设置速度
  3. 支持动态添加和删除条目

本来我还想支持指定滚动方向的,后来因为太懒了,不想支持了,反正自用够了,如果需要增加后面再加。。

现在想想可能利用swiper插件,自己往列表里插入新的dom,然后调用update方法也能实现,现在都做完了就不去深入研究swiper了,虽然swiper的健壮性和扩展性更好。

最终效果就是下面这样了,在添加项目时,会放在顶部,作为下一个要出现的,在删除条目时保证了滚动不抖动,我做了限制,要删除的项目如果在可视区域内,不删除,而是等它移除可视区域才删除。其实也不是已移除可视区域就删除,鬼知道它什么时候移除呀,其实想知道也能大概知道,我觉得没必要那么麻烦,就加个定时器去尝试删除。

在这里插入图片描述

我把它封装成了npm包,https://www.npmjs.com/package/smooth-slide,可能有点简陋,不过好像用起来还行,如果需要的小伙伴可以试试看,想增强功能的,也非常欢迎共建:)

如果对你有帮助,请点个赞呗:,嘻嘻)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Infinity插件是一款功能强大的浏览器插件,它可以提供无限滚动和翻页功能。通过安装Infinity插件,用户在浏览网页时无需手动点击下一页或者滚动到底部,插件会自动加载新的内容,使用户能够连续地浏览网页,提升了浏览效率。 Infinity插件适用于各类网站,包括新闻、社交媒体、博客等。它能够将网页内容自动加载到当前页面,用户可以不间断地阅读连续的文章或帖子,避免了不必要的翻页操作,节省了时间和精力。它还支持按关键字搜索页面内容,帮助用户快速定位感兴趣的内容。 Infinity插件的使用非常简便。只需在浏览器的扩展程序中安装插件,以后无论在何种网页上,用户只需向下滚动鼠标或触摸板,新内容就会自动加载,实现无缝浏览。如果用户对某个网页感兴趣,可以点击内容保存并进行后续操作,如加入收藏夹或分享给朋友。 除了提供无限滚动功能,Infinity还具备一些个性化设置。用户可以根据自己的喜好和需求,调整滚动速度、显示方式等。此外,Infinity插件也提供了浏览记录功能,用户可以随时查看自己浏览过的页面,方便回顾和整理。 总而言之,Infinity插件为用户提供了更自由、高效的网页浏览体验。它的功能强大且易于使用,使得用户在浏览网页时享受到更多的便利和快乐。无论是专业人士、学生,还是普通用户,都能从Infinity插件中受益。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值