<!--component/mygallery/mygallery.wxml-->
|
<page-container show="{{show}}">
|
<view class="fyui-gallery {{show ? 'fyui-gallery_show' : ''}} {{extClass}}">
|
<mp-icon
|
wx:if="{{showRemark}}"
|
class="fyui-gallery__close"
|
icon="close"
|
color="white"
|
size="26"
|
bindtap="hideGallery"
|
></mp-icon>
|
<view class="fyui-gallery__info" wx:if="{{true}}"
|
>{{current+1}} / {{currentImgs.length}}</view
|
>
|
<swiper
|
class="fyui-gallery__img__wrp"
|
bindtap="toggle"
|
indicator-dots="{{false}}"
|
bindanimationfinish="change"
|
current="{{current}}"
|
autoplay="{{false}}"
|
duration="{{500}}"
|
>
|
<block wx:for="{{currentImgs}}" wx:key="index">
|
<swiper-item>
|
<image
|
mode="aspectFit"
|
src="{{item}}"
|
class="fyui-gallery__img"
|
style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotate}}deg);"
|
bindtouchstart="touchStart"
|
bindtouchmove="{{endScale <= 1 ? 'touchMove' : ''}}"
|
capture-catch:touchmove="{{endScale > 1 ? 'touchMove' : undefined}}"
|
bindtouchend="touchEnd"
|
show-menu-by-longpress="{{true}}"
|
></image>
|
</swiper-item>
|
</block>
|
</swiper>
|
<view class="fyui-gallery__opr" wx:if="{{showRemark}}">
|
<view class="fyui-gallery__title">{{title}}</view>
|
<view class="fyui-gallery__des">{{remark}}</view>
|
</view>
|
<scroll-view
|
wx:if="{{showRemark}}"
|
class="swiper-tab"
|
scroll-into-view="item{{current > 2 ? current - 2 : 0}}"
|
scroll-x="true"
|
show-scrollbar="true"
|
scroll-with-animation="true"
|
>
|
<block wx:for="{{currentImgs}}" wx:key="i">
|
<image
|
id="item{{index}}"
|
src="{{item}}"
|
class="swiper-tab-list {{current == index ? 'on' : ''}}"
|
data-current="{{index}}"
|
bindtap="swichNav"
|
mode="aspectFit"
|
></image>
|
</block>
|
</scroll-view>
|
<view wx:if="{{showRemark}}" class="fyui-gallery__tool">
|
<mp-icon
|
mode="filled"
|
class="fyui-gallery__tool__rotate"
|
icon="refresh"
|
color="white"
|
size="26"
|
data-clockwise="{{true}}"
|
bindtap="rotateImg"
|
></mp-icon>
|
<mp-icon
|
mode="filled"
|
class="fyui-gallery__tool__rotate left"
|
icon="refresh"
|
color="white"
|
size="26"
|
data-clockwise="{{false}}"
|
bindtap="rotateImg"
|
></mp-icon>
|
</view>
|
</view>
|
</page-container>
|
