Framework7 - 照片浏览器参数
说明
Framework7 提供了与照片浏览器一起使用的参数列表，列于下表 −
| S.No | 参数 &描述 | 类型 | 默认 |
|---|---|---|---|
| 1 | photos 它是一个包含图片 URL 的数组，或者是一个包含 URL 和标题属性的对象数组。 |
array | [] |
| 2 | initialSlide 它是初始幻灯片的索引号。 |
数字 | 0 |
| 3 | spaceBetween 它表示照片幻灯片之间的距离(以像素为单位)。 |
number | 20 |
| 4 | speed 它表示照片幻灯片之间的过渡时间长度。 |
number | 300 |
| 5 | zoom 它用于启用/禁用缩放和平移照片的功能。 |
boolean | true |
| 6 | maxZoom 这是最大缩放比例。 |
number | 3 |
| 7 | minZoom 这是最小缩放比例。 |
number | 1 |
| 8 | exposition 这是单击照片浏览器时启用/禁用展示模式。 |
boolean | true |
| 9 | expositionHideCaptions 如果设置为 true，则展示模式下的标题将被隐藏。 |
boolean | false |
| 10 | swipeToClose 如果启用此功能，您可以通过向上/向下滑动关闭照片浏览器。 |
boolean | true |
| 11 | view 它是指向初始化视图实例的链接。 |
View 实例 | undefined |
| 12 | type 它定义照片浏览器的打开方式。 |
string | standalone |
| 13 | loop 设置为 true 时，可启用连续循环模式。 |
boolean | false |
| 14 | theme 照片浏览器颜色主题可以是浅色或深色。 |
string | light |
| 15 | captionsTheme 它可以是两种颜色:深色或浅色。 |
string | - |
| 16 | navbar 设置为false可移除照片浏览器的导航栏。 |
boolean | true |
| 17 | toolbar 设置为false可移除照片浏览器的工具栏。 |
boolean | true |
| 18 | backLinkText 这是导航栏后面链接上的文本。 |
string | close |
| 19 | ofText 这是照片计数器的文本。例如 5 张中的 3 张。 |
string | of |
| 延迟加载 | |||
| 1 | lazyLoading 设置为 true 以启用图像的延迟加载。 |
boolean | false |
| 2 | lazyLoadingInPrevNext 设置为 true 以启用最近照片的延迟加载。 |
boolean | false |
| 3 | lazyLoadingOnTransitionStart 过渡到照片后，照片浏览器默认加载惰性照片。如果启用此参数，则可以在过渡开始时加载新照片。 |
boolean | false |
| 模板 | |||
| 1 | navbarTemplate 这是导航栏 HTML 模板。 |
string | - |
| 2 | toolbarTemplate 这是工具栏 HTML 模板。 |
string | - |
| 3 | photoTemplate 这是单个照片元素 HTML 模板。 |
string | - |
| 4 | lazyPhotoTemplate 这是单个延迟加载照片元素 HTML 模板。 |
string | - |
| 5 | objectTemplate 单个对象元素 HTML 模板。 |
string | - |
| 6 | captionTemplate 单个标题元素 HTML 模板。 |
string | - |
| Callbacks(回调) | |||
| 1 | onOpen(photobrowser) 这是回调函数，当打开照片浏览器时会执行。 |
function | - |
| 2 | onClose(photobrowser) 这是回调函数，当用户关闭照片浏览器时会执行。 |
function | - |
| 3 | onSwipeToClose(photobrowser) 这是回调函数，当用户通过上下滑动关闭照片浏览器时将执行该函数。 |
function | - |
| Swiper 回调 | |||
| 1 | onSlideChangeStart(swiper) 此回调函数将在动画开始时执行，以切换到其他幻灯片。它将 swiper 实例作为参数。 |
function | - |
| 2 | onSlideChangeEnd(swiper) 此回调函数将在动画到其他幻灯片后执行。它以 swiper 实例为参数。 |
function | - |
| 3 | onTransitionStart(swiper) 此回调函数将在过渡开始时执行。它以 swiper 实例为参数。 |
function | - |
| 4 | onTransitionEnd(swiper) 此回调函数将在过渡后执行。它以 swiper 实例作为参数。 |
function | - |
| 5 | onClick(swiper,event) 此回调函数将在用户点击滑块后 300 毫秒延迟时运行。它接受 swiper 实例和事件作为参数。 |
function | - |
| 6 | onDoubleTap(swiper, event) 当用户双击滑块容器时，此回调函数将运行。 |
function | - |
| 7 | onLazyImageLoad(swiper, slide, image) 当延迟加载开始加载照片时，将执行此回调函数。 |
函数 | - |
| 8 | onLazyImageReady(swiper, slide, image) 此函数将在延迟加载照片加载后执行。 |
function | - |
framework7_photo_browser.html
