Picture list of full screen display
- Often used for the detailed page of the image to enlarge the display, let the user see the effect clearly.
- You can pass in a set of images, slide shows.
<template>
<div class="demo-container">
<div class="btn" @click="openLightBox">
<text class="btn-txt">Click the button</text>
</div>
<wxc-lightbox
ref="wxc-lightbox"
height="800"
:show="show"
:image-list="imageList"
@wxcLightboxOverlayClicked="wxcLightboxOverlayClicked">
</wxc-lightbox>
</div>
</template>
<script>
import { WxcLightbox } from 'weex-ui';
export default {
components: {
WxcLightbox
},
data: function () {
return {
imageList: [
{ src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg' },
{ src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg' },
{ src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg' }
],
show: false
};
},
methods: {
openLightBox () {
this.show = true;
},
wxcLightboxOverlayClicked () {
this.show = false;
}
}
};
</script>
More details can be found in here
Prop | Type | Required | Default | Description |
---|---|---|---|---|
show | Bool |
Y |
false |
whether to show the light box |
imageList | Array |
Y |
[] |
image list |
height | Number |
Y |
750 |
light box height |
width | Number |
Y |
750 |
light box width |
show-indicator | Bool |
N |
true |
whether to show indicator |
indicator-color | Object |
N |
{} |
indicator style(*1) |
*1 default style:
{'item-color': 'rgba(255, 195, 0, .5)','item-selected-color': '#ffc300','item-size': '20px'}
// @wxcLightboxOverlayClicked="wxcLightboxOverlayClicked"