跳转到内容

多图预览

相关配置项

属性名说明类型默认值
imgList多图预览时传入的图片数组array-
nowImgIndex多图预览时当前图片下标number0
thumbnail是否开启底部缩略图booleantrue

imgList

您无需为单图预览和多图预览设置专属的配置项,无论单图还是多图,我们统一使用imgList参数接收图片地址,我们会根据您传入的图片地址数量自动判断

另外我们提供了多种传参方式,方便您在查看单张图片时使用,您可以直接传入单个图片地址图片地址数组配置项options,以下的使用方式效果是相同的。

js
this.$hevueImgPreview('/1.png')

this.$hevueImgPreview(['/1.png'])

this.$hevueImgPreview({
    imgList: ['/1.png']
})

nowImgIndex

在您传入多张图片地址时,我们需要知道您想要从哪一张图片开始预览,您可以通过配置项nowImgIndex告诉我们,需要注意的是它从0开始。

thumbnail

配置项thumbnail控制缩略图是否开启,需要注意的是它仅在多图预览时生效,如果您仅传入一张图片地址,即使配置thumbnailtrue,缩略图也不会开启。

另外,在前文我们提到过,开启缩略图会一次性加载所有图片,如果不开启缩略图则不会,而是在每一张图片被切换到的时候加载,请您根据您需要一次性浏览的图片数量以及大小决定是否开启缩略图。