@wines/gallery v1.5.1

@wines/gallery

Gallery 画廊

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

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Gallery",
  "usingComponents": {
    "wux-gallery": "@wines/gallery"
  }
}

示例

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

<wux-gallery id="wux-gallery" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">Gallery</view>
		<view class="page__desc">画廊</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">基于小程序原生的wx.previewImage</view>
		<view class="uploader__files">
			<block wx:for="{{ urls }}" wx:key="index">
				<view class="uploader__file" bindtap="previewImage" data-current="{{ item }}">
					<image class="uploader__img" src="{{ item }}" />
				</view>
			</block>
		</view>
		<view class="sub-title">自定义gallery</view>
		<view class="uploader__files">
			<block wx:for="{{ urls }}" wx:key="index">
				<view class="uploader__file" bindtap="showGallery" data-current="{{ index }}">
					<image class="uploader__img" src="{{ item }}" />
				</view>
			</block>
		</view>
		<view class="sub-title">带说明文案 & 自定义图标</view>
		<view class="uploader__files">
			<block wx:for="{{ urls }}" wx:key="index">
				<view class="uploader__file" bindtap="showGallery2" data-current="{{ index }}">
					<image class="uploader__img" src="{{ item }}" />
				</view>
			</block>
		</view>
	</view>
</view>

import './index.less';
import { $wuxGallery } from '@wines/gallery';
import { PageCustom, PageData } from '@wines/core';

Page<PageData, PageCustom>({
  data: {
    urls: [
      'http://cdn.skyvow.cn/logo.png',
      'http://cdn.skyvow.cn/logo.png',
      'http://cdn.skyvow.cn/logo.png',
      'http://cdn.skyvow.cn/logo.png',
    ],
  },
  onLoad() {
    /** */
  },
  showGallery(e) {
    const { current } = e.currentTarget.dataset;
    const { urls } = this.data;

    const $gallery = $wuxGallery();
    $gallery.show({
      current,
      urls,
      onDelete: (current, urls) => {
        urls.splice(current, 1);
        this.setData({
          urls,
        });
        return true;
      },
      onCancel() {
        console.log('Close gallery');
      },
      onTap(current, urls) {
        console.log(current, urls);
        return true;
      },
      onChange(e) {
        console.log(e);
      },
    });
  },
  showGallery2(e) {
    const { current } = e.currentTarget.dataset;
    const { urls } = this.data;

    $wuxGallery().show({
      current,
      urls: urls.map((n) => ({ image: n, remark: n })),
      indicatorDots: true,
      indicatorColor: '#fff',
      indicatorActiveColor: '#04BE02',
      icon: 'http://cdn.skyvow.cn/logo.png',
      onDelete: (current, urls) => {
        console.log('onIconClick', current, urls);
        return true;
      },
    });
  },
  previewImage(e) {
    const { current } = e.currentTarget.dataset;
    const { urls } = this.data;
    void wx.previewImage({
      current,
      urls,
    });
  },
});

API

Gallery.method

• Gallery.show
• Gallery.hide
• Gallery.slideTo
• Gallery.slideNext
• Gallery.slidePrev