Taro h5 图片预览支持放大缩小

最新推荐文章于 2024-04-26 17:06:14 发布

爱吃烧烤的技术渣

最新推荐文章于 2024-04-26 17:06:14 发布

阅读量2.4k

点赞数

分类专栏： taro

本文链接：https://blog.csdn.net/qq_39410421/article/details/117387844

版权

taro 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍如何在Taro项目中利用react-photo-view库封装一个图片预览组件，以实现类似微信图片预览的效果，包括图片缩放功能。在iOS设备上存在长按和关闭预览事件冲突的问题，通过调整组件配置解决了冲突。

摘要由CSDN通过智能技术生成

使用Taro 开发一个图片列表的页面，需要支持图片预览，

原先以为是modal+image 即可，Taro.previewImage 在h5无法缩放图片，但产品说希望像微信预览图片一样，可以放大缩小

但Taro 没有支持的组件，网上搜索了下，找到 react-photo-view 插件

利用此插件封装了一下组件，贴上代码

interface IProps {
  visible: boolean;
  current: number;
  urls: string[];
  onClose: () => void;
  onChange: (arg: number) => void;
  photoClosable?: boolean;
}

const PreviewImage: React.FC<IProps> = ({
  visible,
  current,
  urls,
  onClose,
  onChange,
  photoClosable = false,
  ...rest
}) => {
  return (
    <PhotoProvider {...rest}>
      <PhotoSlider
        images={urls.map((item) => ({ src: item }))}
        photoClosable={photoClosable}
        visible={visible}
        onClose={onClose}
        index={current}
        onIndexChange={onChange}
      />
    </PhotoProvider>
  );
};
export default PreviewImage;

但是存在问题，ios的长按和photoClosable的点击关闭预览事件冲突（和产品沟通，取消photoClosable这个，因为本身这个组件点击图片之外的区域和右上角「x」可以关闭）

使用如下

 <PreviewImage
          visible={isOpened}
          current={currentPic}
          urls={ImageList}
          onClose={() => setIsOpened(false)}
          onChange={(index) => setCurrentPic(index)}
        />