当多张图片需要分组展示时,大图预览左上角图片下标及统计错误
jquite opened this issue · 6 comments
jquite commented
版本: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>
MinJieLiu commented
你可以参数设置不显示 toolbar ,自己overlayRender实现一个 toolbar.
jquite commented
你可以参数设置不显示 toolbar ,自己overlayRender实现一个 toolbar.
我设置toolbarRender={false},计数器还在;设置bannerVisible={false} 则左右切换的功能没有了;接着我尝试用css禁用计数器,然后自己写计数器,但是onIndexChange获取到的index仍然是images里面的下标,似乎解决不了根本问题
MinJieLiu commented
有在线例子吗
jquite commented
有在线例子吗
我简单写了一个:https://github.com/jquite/react-photo-view-example
感谢您的时间。
MinJieLiu commented
jquite commented