博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
动态流程图,超出部分横向滚动
阅读量:5284 次
发布时间:2019-06-14

本文共 333 字,大约阅读时间需要 1 分钟。

这个是入职新公司,在改完项目bug的时候,无意间发现这个功能,觉得思路很好,就去研究了一下。效果如下:

最初看到这个流程图,以为是用了什么插件。然后就去代码中看了一下,最后发现是用的平时都很熟悉的swiper,也一下让我拓宽了思路了。

大体思路如下:

每个swiper-slide的宽度=日期容器的宽度+循环出的节点数量*节点的宽度(由于节点容器是上下有重叠的部分,所以还要减去减去节点数量*重叠的宽度)

react 代码如下:(100是每个li的宽度,30是重叠部分的宽度,剩下两个slide距离就自己把控就好了)

这样就巧妙地使用swiper完成了超出部分滚动的效果

 

转载于:https://www.cnblogs.com/zpxm/p/9998636.html

你可能感兴趣的文章
java获取hostIp和hostName
查看>>
关于web服务器和数据库的各种说法(搜集到的)
查看>>
C# Stream 和 byte[] 之间的转换
查看>>
OMG: daily scrum nine
查看>>
redis与spring结合错误情况
查看>>
第六章 字节码执行方式--解释执行和JIT
查看>>
字符串方法title()、istitle()
查看>>
yield语句
查看>>
查看linux系统中占用cpu最高的语句
查看>>
[洛谷P1738]洛谷的文件夹
查看>>
ubuntu server设置时区和更新时间
查看>>
【京东咚咚架构演进】-- 好文收藏
查看>>
【HTML】网页中如何让DIV在网页滚动到特定位置时出现
查看>>
文件序列化
查看>>
jQuery之end()和pushStack()
查看>>
Bootstrap--响应式导航条布局
查看>>
Learning Python 009 dict(字典)和 set
查看>>
JavaScript中随着鼠标拖拽而移动的块
查看>>
HDU 1021 一道水题
查看>>
The operation couldn’t be completed. (LaunchServicesError error 0.)
查看>>