Gallery 画廊

用于预览图片或其他操作。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Gallery",
  3.     "usingComponents": {
  4.         "wux-gallery": "../../dist/gallery/index"
  5.     }
  6. }

示例

!> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-gallery 或其他，之后在 page.js 中调用 $wuxGallery(id) 获取匹配到的第一个组件实例对象。

  1. <wux-gallery id="wux-gallery" />
  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Gallery</view>
  6.         <view class="page__desc">画廊</view>
  7.     </view>
  8.     <view class="page__bd">
  9.         <view class="weui-cells__title">基于小程序原生的wx.previewImage</view>
  10.         <view class="weui-cells weui-cells_after-title">
  11.             <view class="weui-cell">
  12.                 <view class="weui-cell__bd">
  13.                     <view class="weui-uploader">
  14.                         <view class="weui-uploader__bd">
  15.                             <view class="weui-uploader__files">
  16.                                 <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
  17.                                     <view class="weui-uploader__file" bindtap="previewImage" data-current="{{ item }}">
  18.                                         <image class="weui-uploader__img" src="{{ item }}" />
  19.                                     </view>
  20.                                 </block>
  21.                             </view>
  22.                         </view>
  23.                     </view>
  24.                 </view>
  25.             </view>
  26.         </view>
  27.         <view class="weui-cells__title">自定义gallery</view>
  28.         <view class="weui-cells weui-cells_after-title">
  29.             <view class="weui-cell">
  30.                 <view class="weui-cell__bd">
  31.                     <view class="weui-uploader">
  32.                         <view class="weui-uploader__bd">
  33.                             <view class="weui-uploader__files">
  34.                                 <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
  35.                                     <view class="weui-uploader__file" bindtap="showGallery" data-current="{{ index }}">
  36.                                         <image class="weui-uploader__img" src="{{ item }}" />
  37.                                     </view>
  38.                                 </block>
  39.                             </view>
  40.                         </view>
  41.                     </view>
  42.                 </view>
  43.             </view>
  44.         </view>
  45.         <view class="weui-cells__title">带说明文案</view>
  46.         <view class="weui-cells weui-cells_after-title">
  47.             <view class="weui-cell">
  48.                 <view class="weui-cell__bd">
  49.                     <view class="weui-uploader">
  50.                         <view class="weui-uploader__bd">
  51.                             <view class="weui-uploader__files">
  52.                                 <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
  53.                                     <view class="weui-uploader__file" bindtap="showGallery2" data-current="{{ index }}">
  54.                                         <image class="weui-uploader__img" src="{{ item }}" />
  55.                                     </view>
  56.                                 </block>
  57.                             </view>
  58.                         </view>
  59.                     </view>
  60.                 </view>
  61.             </view>
  62.         </view>
  63.     </view>
  64. </view>
  1. import { $wuxGallery } from '../../dist/index'
  3. Page({
  4.     data: {
  5.         urls: [
  6.             'https://unsplash.it/200/200',
  7.             'https://unsplash.it/300/300',
  8.             'https://unsplash.it/400/400',
  9.             'https://unsplash.it/600/600',
  10.             'https://unsplash.it/800/800',
  11.             'https://unsplash.it/900/900',
  12.             'https://unsplash.it/1000/1000',
  13.             'https://unsplash.it/1200/1200',
  14.         ],
  15.     },
  16.     onLoad() {},
  17.     showGallery(e) {
  18.         const { current } = e.currentTarget.dataset
  19.         const { urls } = this.data
  21.         this.$wuxGallery = $wuxGallery()
  23.         this.$wuxGallery.show({
  24.             current,
  25.             urls,
  26.             [`delete`]: (current, urls) => {
  27.                 urls.splice(current, 1)
  28.                 this.setData({
  29.                     urls,
  30.                 })
  31.                 return true
  32.             },
  33.             cancel() {
  34.                 console.log('Close gallery')
  35.             },
  36.             onTap(current, urls) {
  37.                 console.log(current, urls)
  38.                 return true
  39.             },
  40.             onChange(e) {
  41.                 console.log(e)
  42.             },
  43.         })
  44.     },
  45.     showGallery2(e) {
  46.         const { current } = e.currentTarget.dataset
  47.         const { urls } = this.data
  49.         $wuxGallery().show({
  50.             current,
  51.             urls: urls.map((n) => ({ image: n, remark: n })),
  52.             showDelete: false,
  53.             indicatorDots: true,
  54.             indicatorColor: '#fff',
  55.             indicatorActiveColor: '#04BE02',
  56.         })
  57.     },
  58.     previewImage(e) {
  59.         const { current } = e.currentTarget.dataset
  60.         const { urls } = this.data
  62.         wx.previewImage({
  63.             current,
  64.             urls,
  65.         })
  66.     },
  67. })

视频演示

Gallery

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-gallery
options.classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—slideInRight
options.indicatorDots boolean 是否显示面板指示点 false
options.indicatorColor string 指示点颜色 rgba(0, 0, 0, .3)
options.indicatorActiveColor string 当前选中的指示点颜色 #000000
options.autoplay boolean 是否自动切换 false
options.interval number 自动切换时间间隔 5000
options.duration number 滑动动画时长 500
options.circular boolean 是否采用衔接滑动 false
options.vertical boolean 滑动方向是否为纵向 false
options.showDelete boolean 是否显示删除按钮 true
options.allowScale boolean 是否支持手势缩放 true
options.current number 当前显示图片的索引值 0
options.urls array 需要预览的图片链接列表 []
options.delete function 点击删除的回调函数，返回值为 true 时将会关闭组件 -
options.cancel function 点击关闭的回调函数 -
options.onTap function 图片点击事件，返回值为 true 时将会关闭组件 -
  • Gallery.show
  • Gallery.hide
  • Gallery.slideTo
  • Gallery.slideNext
  • Gallery.slidePrev