AZZERO
V2EX  ›  问与答

求问 V2 的前端大佬,这个 dribbble 里 10000 赞的 slider 是怎么实现的?

  •  
  •   AZZERO · May 21, 2019 · 2555 views
    This topic created in 2585 days ago, the information mentioned may be changed or developed.

    如图所示,上下滑动屏幕,卡片可以围绕圆心流畅滚动, 因为技术所限,自己造轮子比较困难,想通过 swiper 库来实现,不知道大佬们有没有好的思路?

    swiper demo

    6 replies    2019-05-22 08:44:45 +08:00
    AZZERO
        1
    AZZERO  
    OP
       May 21, 2019
    github 里找不到合适的库啊~~
    S23VqeW93WZLlm6s
        2
    S23VqeW93WZLlm6s  
       May 21, 2019
    css3 有旋转,滚动可以看成旋转的圆的边,根据屏幕滚动的距离调节旋转的角度。
    rabbbit
        3
    rabbbit  
       May 21, 2019
    用 absolute 和 rotate 固定图片.监控 touch 事件, 然后根据移动距离 rotate 容器.
    难点在于计算滚动幅度如何更自然和图片的的摆放位置.
    unsized
        4
    unsized  
       May 21, 2019
    https://jsbin.com/bukilaleye/1/edit?output

    简单写了一下。ios 下面橡皮筋效果导致并不怎么好用。。
    AZZERO
        5
    AZZERO  
    OP
       May 21, 2019
    @tyx1703 感谢大佬, 但是 这个滚动几乎不可用啊,我发现了一个库: https://github.com/Prinzhorn/skrollr 但是文档里 Mobile support 说不支持 position:fixed ....
    unsized
        6
    unsized  
       May 22, 2019 via iPhone
    @AZZERO 额,这只是一个测试 transform 可行性的例子,滑动那里我只是简单写了一下,要做的好,还得好好改进
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   919 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 57ms · UTC 22:44 · PVG 06:44 · LAX 15:44 · JFK 18:44
    ♥ Do have faith in what you're doing.