wxc-lightbox

Weex 图片列表全屏显示组件

规则：

• 常用于详情页面的图片放大显示，让用户清晰看到效果
• 需要设置图片的显示高度，也可以设置宽度（默认750px）
• 可以传入一组图片，滑动显示

Demo

使用方法

  1. <template>
    2.   <div class="demo-container">
    3.     <div class="btn" @click="openLightBox">
    4.       <text class="btn-txt">点击按钮弹出全屏图片</text>
    5.     </div>
    6.     <wxc-lightbox
    7.       ref="wxc-lightbox"
    8.       height="800"
    9.       :show="show"
    10.       :image-list="imageList"
    11.       @wxcLightboxOverlayClicked="wxcLightboxOverlayClicked">
    12.     </wxc-lightbox>
    13.   </div>
    14. </template>
    15.   16. <script>
    17.   import { WxcLightbox } from 'weex-ui';
    18.   export default {
    19.     components: {
    20.       WxcLightbox
    21.     },
    22.     data: function () {
    23.       return {
    24.         imageList: [
    25.           { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg' },
    26.           { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg' },
    27.           { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg' }
    28.         ],
    29.         show: false
    30.       };
    31.     },
    32.     methods: {
    33.       openLightBox () {
    34.         this.show = true;
    35.       },
    36.       wxcLightboxOverlayClicked () {
    37.       // 无状态组件，需要在此次关闭
    38.         this.show = false;
    39.       }
    40.     }
    41.   };
    42. </script>Click to copy

更详细代码可以参考 demo

可配置参数

事件回调

  1. // 点击蒙层关闭预览 `@wxcLightboxOverlayClicked="wxcLightboxOverlayClicked"`Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/