V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
islujw
V2EX  ›  JavaScript

是否有触摸滑动 js 能做到像 iOS 上 Apple Music「为你推荐」顶部卡片左右滑动那样的效果?

  •  
  •   islujw · 2018-04-14 00:27:41 +08:00 · 3626 次点击
    这是一个创建于 1762 天前的主题,其中的信息可能已经有所发展或是发生改变。

    也就是说,滑动后都会定格在某张卡片上,而不是自由位置。滑动效果与之相似度越高越好哦。

    10 条回复    2021-11-01 23:49:11 +08:00
    noe132
        1
    noe132  
       2018-04-14 01:34:04 +08:00
    没有用过 Apple Music.
    当然是可以的。
    计算一下每张卡片的相对于 container 的 offsetTop,然后触摸滑动停止后找到最近的卡片,scroll container 到指定位置对齐就可以了。
    congeec
        2
    congeec  
       2018-04-14 01:55:31 +08:00
    Carousel
    paloalto
        3
    paloalto  
       2018-04-14 11:44:17 +08:00 via iPhone   ❤️ 1
    hronro
        4
    hronro  
       2018-04-15 00:34:17 +08:00
    你能不能录个 GIF,到底是啥样的效果?
    islujw
        5
    islujw  
    OP
       2018-04-15 07:14:35 +08:00
    @paloalto 赞👍感谢!
    islujw
        6
    islujw  
    OP
       2018-04-15 07:23:33 +08:00
    @paloalto 不过如果能只能判断,非触屏设备禁止鼠标滑动,Mac 用触摸板滑动等等,就更好了。
    paloalto
        7
    paloalto  
       2018-04-15 12:04:01 +08:00
    @islujw #6 根据 UA 判断设备,然后控制这个: http://idangero.us/swiper/api/#mousewheel
    islujw
        8
    islujw  
    OP
       2018-05-06 18:59:17 +08:00
    @paloalto 多谢!还有 Apple Music 为你推荐页的「最近播放」,是可以自由滚动的,但总是会刚好在固定的位置停下来(如果只移动很小的一段距离则会被反弹回来不让移动)。
    q2569628572
        9
    q2569628572  
       2021-04-06 11:09:32 +08:00
    我尝试用 jQuery 做了一个效果差不多的
    demo: https://www.hxmusic.xyz/home
    islujw
        10
    islujw  
    OP
       2021-11-01 23:49:11 +08:00
    @q2569628572 不好意思啊,太久没上线,刚看到。这个页面已经打不开了😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   实用小工具   ·   5196 人在线   最高记录 5556   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 03:08 · PVG 11:08 · LAX 19:08 · JFK 22:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.