H5 图片查看器

H5图片查看器

场景

最近需求涉及图片查看的操作，UI设计了一张图片查看的图，要求点击查看图片并支持左右滑动，由于antd-mobile v2版本没有类似组件，所以通过套娃的方式套了一个。

套娃结果：UI还是挺满意😂😂。

GitHub

Codesandbox 体验地址

依赖

antd-mobile@2.3.4

预览图

套娃流程

• 首先通过 Modal 用来实现查看的遮罩
• 接着在 Modal 中套一个 Carousel 用来显示图片
• 最后在 Carousel 中布局并实现交互效果
• 注：需修改abtd-mobile组件本身的css

使用

1. 数据源

const demoImages = [
     {
       url:
         "https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80",
       title: "楼层",
       describe: "楼层楼层楼层"
     },
     {
       url:
         "https://images.unsplash.com/photo-1601128533718-374ffcca299b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3128&q=80",
       title: "风景",
       describe: "风景风景风景风景风景风景风景"
     },
     // ...
];

2. 组件

  <ImageViewer
      visible={boolean}
      selectedIndex={1}
      images={demoImages}
      onIndexChange={(index)=>{}}
      onClose={(bool) => {}}
    />

3. 参数

属性	说明	类型	默认值
images	图片资源的 url 列表	[]	-
visible	是否显示	boolean	false
selectedIndex	默认显示第几张图片	number	0
onClose	关闭触发	(false) => void	-
onIndexChange	切换图片时触发	(index: number) => void	-

总结

• 管理组件状态 useState
• 执行副作用 useEffect
• 缓存优化 useMemo
• 数据容器 useRef