📅  最后修改于: 2021-01-02 06:31:37             🧑  作者: Mango
照片浏览器参数
Framework7提供了很多参数,可以与照片浏览器一起使用。
Index |
Parameter |
Type |
Description |
1) |
photos |
array |
It is an array with URLs of images or an array of objects with URL and caption properties. |
2) |
initialSlide |
number |
It is an initial slide’s index number. |
3) |
spaceBetween |
number |
It represents the distance between photo slides in pixels. |
4) |
speed |
number |
It represents the time duration of transition between photo slides. |
5) |
zoom |
boolean |
It is used to enable/disable ability to zoom and pan photos. |
6) |
maxZoom |
number |
It is the maximum zoom ratio. |
7) |
minZoom |
number |
It is the minimum zoom ratio. |
8) |
exposition |
boolean |
It enables/disables the exposition mode when clicking on photo browser. |
9) |
expositionHideCaptions |
boolean |
If this is set to true then captions in exposition mode is hidden. |
10) |
swipeToClose |
boolean |
If this is enabled, you can close the photo browser with swipe up/down. |
11) |
view |
View instance |
It is the link to initialized view instance. |
12) |
type |
string |
It defines how the photo browser should be opened. |
13) |
loop |
boolean |
When set to true, it enables continuous loop mode. |
14) |
theme |
string |
The photo browser color theme can be light or dark. |
15) |
captionsTheme |
string |
It can be of two color dark or light. |
16) |
navbar |
boolean |
It is set to false to remove the photo browser’s navbar. |
17) |
toolbar |
boolean |
It is set to false to remove the photo browser?s toolbar. |
18) |
backLinkText |
string |
It is the text on the link at the back in navbar. |
19) |
ofText |
string |
It is the text of in photos counter. For eg 3 of 5. |
延迟加载
Index |
Parameter |
Type |
Description |
1) |
lazyLoading |
boolean |
It is set to true to enable lazy loading of images. |
2) |
lazyLoadingInPrevNext |
boolean |
It is set to true to enable lazy loading for the closest photos. |
3) |
lazyLoadingOnTransitionStart |
boolean |
After the transition to photo, the photo browser will load lazy photos by default. If you enable this parameter, you can load new photo in the beginning of transition. |
范本
Index |
Parameter |
Type |
Description |
1) |
navbartemplate |
string |
It is the navbar html template. |
2) |
toolbartemplate |
string |
It is the toolbar html template. |
3) |
phototemplate |
string |
It is the single photo element html template. |
4) |
lazyphototemplate |
string |
It is the single lazy loading photo element html template. |
5) |
objecttemplate |
string |
It is the single object element html template. |
6) |
captiontemplate |
string |
It is the single caption element html template. |
回呼
Index |
Parameter |
Type |
Description |
1) |
onOpen(photobrowser) |
function |
It is the callback function, which will be executed when photo browser is opened. |
2) |
onClose(photobrowser) |
function |
It is the callback function, which will be executed when user closes the photo browser. |
3) |
onSwipeToClose(photobrowser) |
function |
It is the callback function, which will be executed when user closes the photo browser by swiping up or down. |
滑动回叫
Index |
Parameter |
Type |
Description |
1) |
onSlideChangeStart(swiper) |
function |
This callback function will be executed in the beginning of animation to other slide. It takes swiper instance as an argument. |
2) |
onSlideChangeEnd(swiper) |
function |
This callback function will be executed after animation to other slide. It takes swiper instance as an argument. |
3) |
onTransitionStart(swiper) |
function |
This callback function will be executed at the beginning of transition. It takes swiper instance as an argument. |
4) |
onTransitionEnd(swiper) |
function |
This callback function will be executed after the transition. It takes swiper instance as an argument. |
5) |
onClick(swiper,event) |
function |
This callback function will run when the user clicks on slider after 300ms delay. It accepts swiper instance and event as an parameter. |
6) |
onDoubleTap(swiper, event) |
function |
This callback function will run when the user double clicks on slider container. |
7) |
onLazyImageLoad(swiper, slide, image) |
function |
This callback function will be executed when lazy load begins loading photo. |
8) |
onLazyImageReady(swiper, slide, image) |
function |
This function will be executed after lazy loading photo will be loaded. |