照片浏览器参数(Photo Browser Parameters)
描述 (Description)
Framework7提供了一个参数列表,这些参数与照片浏览器一起使用,并列在下表中 -
S.No | 参数和描述 | 类型 | 默认 |
---|---|---|---|
1 | photos 它是一个包含图像URL或带有URL和标题属性的对象数组的数组。 | array | [] |
2 | initialSlide 这是初始幻灯片的索引号。 | number | 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 它是初始化视图实例的链接。 | 查看实例 | undefined |
12 | type 它定义了如何打开照片浏览器。 | string | standalone |
13 | loop 设置为true ,它启用连续循环模式。 | boolean | false |
14 | theme 照片浏览器颜色主题可以是light或dark 。 | string | light |
15 | captionsTheme 它可以是两种颜色的dark或light 。 | 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 | - |
回调 | |||
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) 当用户在300ms延迟后单击滑块时,将运行此回调函数。 它接受swiper实例和事件作为参数。 | function | - |
6 | onDoubleTap(swiper, event) 当用户双击滑块容器时,将运行此回调函数。 | function | - |
7 | onLazyImageLoad(swiper, slide, image) 当延迟加载开始加载照片时,将执行此回调函数。 | function | - |
8 | onLazyImageReady(swiper, slide, image) 加载延迟加载照片后将执行此功能。 | function | - |