wxc-lightbox

Weex 图片列表全屏显示组件

规则：

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

    Demo

wxc-lightbox 幻灯片 - 图1 wxc-lightbox 幻灯片 - 图2

使用方法

  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>
  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>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
show Bool Y false 全屏图片是否显示
imageList Array Y [] 全屏显示图片列表
height Number Y 750 全屏显示图片高度
width Number Y 750 全屏显示图片宽度
show-indicator Bool N true 全屏后是否显示索引…
indicator-color Object N {} 索引样式配置（注 1）

注 1 中样式：

  1. {'item-color': 'rgba(255, 195, 0, .5)','item-selected-color': '#ffc300','item-size': '20px'}

事件回调

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

Please feel free to use and contribute to the development.

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