照片浏览器参数

本文概述

  • 延迟加载
  • 范本
  • 回呼
  • 滑动回叫
【照片浏览器参数】Framework7提供了很多参数, 可以与照片浏览器一起使用。
指数 参数 类型 描述
1) photos array 它是具有图像URL的数组或具有URL和标题属性的对象的数组。
2) initialSlide number 它是初始幻灯片的索引号。
3) spaceBetween number 它表示照片幻灯片之间的距离(以像素为单位)。
4) speed number 它代表幻灯片之间的过渡时间。
5) zoom boolean 它用于启用/禁用缩放和平移照片的功能。
6) maxZoom number 这是最大缩放比例。
7) minZoom number 这是最小缩放比例。
8) exposition boolean 单击照片浏览器时, 它启用/禁用显示模式。
9) expositionHideCaptions boolean 如果将其设置为true, 则隐藏博览会模式下的字幕。
10) swipeToClose boolean 如果启用此功能, 则可以向上/向下滑动来关闭照片浏览器。
11) view View instance 它是初始化视图实例的链接。
12) type string 它定义了应如何打开照片浏览器。
13) loop boolean 设置为true时, 它将启用连续循环模式。
14) theme string 照片浏览器的颜色主题可以是浅色或深色。
15) captionsTheme string 它可以是深色或浅色两种。
16) navbar boolean 设置为false以删除照片浏览器的导航栏。
17) toolbar boolean 设置为false将删除照片浏览器的工具栏。
18) backLinkText string 它是导航栏中后面链接上的文本。
19) ofText string 它是照片计数器中的文本。例如5之3。
延迟加载
指数 参数 类型 描述
1) lazyLoading boolean 设置为true以启用图像的延迟加载。
2) lazyLoadingInPrevNext boolean 设置为true可以为最近的照片启用延迟加载。
3) lazyLoadingOnTransitionStart boolean 过渡到照片后, 默认情况下, 照片浏览器将加载惰性照片。如果启用此参数, 则可以在过渡开始时加载新照片。
范本
指数 参数 类型 描述
1) navbartemplate string 这是导航栏html模板。
2) toolbartemplate string 它是工具栏的html模板。
3) phototemplate string 这是单个照片元素html模板。
4) lazyphototemplate string 它是单个延迟加载照片元素html模板。
5) objecttemplate string 它是单个对象元素html模板。
6) captiontemplate string 它是单个标题元素html模板。
回呼
指数 参数 类型 描述
1) onOpen(photobrowser) function 它是回调函数, 将在打开照片浏览器时执行。
2) onClose(photobrowser) function 这是回调函数, 将在用户关闭照片浏览器时执行。
3) onSwipeToClose(photobrowser) function 这是回调函数, 当用户通过向上或向下滑动关闭照片浏览器时将执行该回调函数。
滑动回叫
指数 参数 类型 描述
1) onSlideChangeStart(swiper) function 该回调函数将在动画开始时执行到其他幻灯片。它以swiper实例为参数。
2) onSlideChangeEnd(swiper) function 动画播放到其他幻灯片后, 将执行此回调函数。它以swiper实例为参数。
3) onTransitionStart(swiper) function 该回调函数将在转换开始时执行。它以swiper实例为参数。
4) onTransitionEnd(swiper) function 该回调函数将在转换后执行。它以swiper实例为参数。
5) onClick(swiper, event) function 当用户在300ms延迟后单击滑块时, 将运行此回调函数。它接受swiper实例和事件作为参数。
6) onDoubleTap(swiper, event) function 当用户双击滑块容器时, 将运行此回调函数。
7) onLazyImageLoad(swiper, slide, image) function 延迟加载开始加载照片时将执行此回调函数。
8) onLazyImageReady(swiper, slide, image) function 加载延迟加载的照片后, 将执行此功能。

    推荐阅读