MinJieLiu/react-photo-view

当多张图片需要分组展示时,大图预览左上角图片下标及统计错误

jquite opened this issue · 6 comments

版本:1.2.1
当图片是以分组动态加载时,大图状态下左上角的统计似乎叠加了上一组图片的数量,如果作为components,除了初始化加载的默认分组大图预览没问题外,其他分组则是显示图片总数为已经切换分组图片数量的两倍。举个例子:
我有3组图片,每组图片20张。
1、当我在index里面使用的时候,打开第一组第一张预览大图时,左上角的统计是“1/20”,这是正常的。然后切换到第二组,此时大图状态下左上角的统计为“20/40”,打开第三组则为“40/60”。
2、当我将这部分功能封装到components时,打开第一组第一张预览大图时,左上角的统计是“1/20”,这是正常的。打开第二组,则显示“40/80”,第三组显示“100/120”
请问有没有办法重置OverlayRenderProps images的方法?

<PhotoProvider
  maskClosable={false}
  toolbarRender={({ rotate, onRotate, onScale, scale, index }) => {
    return (
      <div className={styles.toolbar}>
        <ZoomInOutlined onClick={() => onScale(scale + 1)} />
        <ZoomOutOutlined onClick={() => onScale(scale - 1)} />
        <RotateLeftOutlined onClick={() => onRotate(rotate - 90)} />
        <RotateRightOutlined onClick={() => onRotate(rotate + 90)} />
      </div>
    );
  }}
  loadingElement={<LoadingOutlined />}
  overlayRender={({ images, rotate, onRotate, scale, index }) => {
    console.log('images', images)
    return (
      <div className={styles.overlayRender}>
        <div style={{ marginBottom: 5 }}>
          {entryHtml(images[index].overlay)}
        </div>
        <p>
          <span>分类:</span>
          <span>{images[index].overlay.category}</span>
        </p>
      </div>
    );
  }}
>
  {currentItems.map((item, index) => (
    <div className={styles.item} key={index}>
      <PhotoView
        src={`/IMAGE_SERVER?id=${item._id}&serial=${item.photo.serial}`}
        overlay={item}
      >
        <img
          src={`/IMAGE_SERVER?id=${item._id}&serial=${item.photo.serial}`}
          alt=""
        />
      </PhotoView>
      <div>缩略图描述</div>
    </div>
  ))}
</PhotoProvider>

你可以参数设置不显示 toolbar ,自己overlayRender实现一个 toolbar.

你可以参数设置不显示 toolbar ,自己overlayRender实现一个 toolbar.

我设置toolbarRender={false},计数器还在;设置bannerVisible={false} 则左右切换的功能没有了;接着我尝试用css禁用计数器,然后自己写计数器,但是onIndexChange获取到的index仍然是images里面的下标,似乎解决不了根本问题

有在线例子吗

有在线例子吗

我简单写了一个:https://github.com/jquite/react-photo-view-example
感谢您的时间。

  • react-photo-view@1.2.2

image
再配合 key 就好了

  • react-photo-view@1.2.2

image 再配合 key 就好了

可以了,非常感谢!