V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liumingyi1
V2EX  ›  分享创造

分享一个最近写的 React 图片预览组件

  •  4
     
  •   liumingyi1 · 2020-01-02 18:57:47 +08:00 · 5786 次点击
    这是一个创建于 1815 天前的主题,其中的信息可能已经有所发展或是发生改变。

    特性

    1. 支持左右切换导航、上 /下滑关闭、双击放大 /缩小、双指放大 /缩小 /平移、键盘导航 /关闭、点击切换控件等
    2. 打开 /关闭缩放动画
    3. 自适应图像适应
    4. 支持桌面端(兼容 IE10+)/移动端
    5. 支持服务端渲染
    6. 基于 Typescript

    最重要的还是 Demo: http://minjieliu.gitee.io/react-photo-view/ gitee 国内快

    手机端和桌面端都可以体验,不过桌面端感觉不太违和,后期会加上一些导航控件。

    虽然没有写测试,但用在生产环境有一段时间了,有时间后期可以补上。

    其实在写这个组件的时候已经对比过好几个插件,很多都是原生 js 写的,用在 React 中感觉不太友好,其他 React 的图片预览细节又不太完善,于是肝了许久,搞出一个😂。其主要难点就是在图片位置触摸控制上,要想体验好,细节就要多。

    滑动减速目前使用 css 动画过渡,还可以再优化下,用物理阻尼运动公式实现体验更自然。

    Github

    https://github.com/MinJieLiu/react-photo-view 喜欢就帮忙点个 Star! 谢谢😊

    10 条回复    2020-03-22 15:46:53 +08:00
    newbieRenew
        1
    newbieRenew  
       2020-01-02 22:25:50 +08:00 via iPhone
    挺好的,就是滑动关闭时背景会闪一下。好像是因为拖动到边缘会将背景色调成透明 0->1,关闭时又会从 1->0。
    newbieRenew
        2
    newbieRenew  
       2020-01-02 22:27:20 +08:00 via iPhone
    1->0,关闭时又会从 1->0。
    ewqazxc
        3
    ewqazxc  
       2020-01-02 22:36:23 +08:00
    这个缩小是指放大后再缩小?
    mayne95
        4
    mayne95  
       2020-01-03 03:45:48 +08:00 via iPad
    之前有这个需求,找了一圈发现没几个好用的轮子。试了一下楼主这个,体验还不错,爱了爱了👍
    sunwang
        5
    sunwang  
       2020-01-03 09:00:37 +08:00
    小小的组件东西真不少,细节处理的很好,赞!
    liumingyi1
        6
    liumingyi1  
    OP
       2020-01-03 09:35:34 +08:00
    1 -> 0 这个记下了,后面会修复
    greatghoul
        7
    greatghoul  
       2020-01-05 09:20:25 +08:00
    做的相当好,最近刚好有需求,收了。
    hua123s
        8
    hua123s  
       2020-03-10 18:23:15 +08:00
    小小的东西 细节真多,这源码看的头疼 2333
    hua123s
        9
    hua123s  
       2020-03-10 18:25:49 +08:00
    this.onMove = throttle(this.onMove, 8); 请问为什么这里设置是 8 ?其中有什么原因?
    liumingyi1
        10
    liumingyi1  
    OP
       2020-03-22 15:46:53 +08:00
    @hua123s 图个吉利,因为不能超 16
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2582 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:58 · PVG 13:58 · LAX 21:58 · JFK 00:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.