gallery.md

gallery(options)

画廊

参数	类型	描述
options	object	配置项
options.current	number	当前显示图片的索引值
options.urls	array	需要预览的图片链接列表
options.delete	function	点击删除的回调函数
options.cancel	function	点击关闭的回调函数

Example

<import src="../../components/gallery/gallery.wxml"/>

<template is="gallery" data="{{ ...$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="weui-cells__title">基于小程序原生的wx.previewImage</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="weui-uploader">
                        <view class="weui-uploader__bd">
                            <view class="weui-uploader__files">
                                <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
                                    <view class="weui-uploader__file" bindtap="previewImage" data-current="{{ item }}">
                                        <image class="weui-uploader__img" src="{{ item }}" />
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="weui-cells__title">自定义gallery</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <view class="weui-uploader">
                        <view class="weui-uploader__bd">
                            <view class="weui-uploader__files">
                                <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
                                    <view class="weui-uploader__file" bindtap="showGallery" data-current="{{ index }}">
                                        <image class="weui-uploader__img" src="{{ item }}" />
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

import { $wuxGallery } from '../../components/wux'

Page({
    data: {
        urls: [
            'https://unsplash.it/200/200', 
            'https://unsplash.it/300/300', 
            'https://unsplash.it/400/400', 
            'https://unsplash.it/600/600', 
            'https://unsplash.it/800/800', 
            'https://unsplash.it/900/900', 
            'https://unsplash.it/1000/1000', 
            'https://unsplash.it/1200/1200', 
        ],
    },
    onLoad() {},
    showGallery(e) {
        const dataset = e.currentTarget.dataset
        const current = dataset.current
        const urls = this.data.urls

        $wuxGallery.show({
            current: current, 
            urls: urls, 
            [`delete`](current, urls){
                urls.splice(current, 1)
                this.setData({
                    urls: urls, 
                })
                return !0
            },
            cancel: () => console.log('Close gallery')
        })
    },
    previewImage(e) {
        const dataset = e.currentTarget.dataset
        const current = dataset.current
        const urls = this.data.urls

        wx.previewImage({
            current: current, 
            urls: urls, 
        })
    },
})