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

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

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

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

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

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

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

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

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