riku
2024-08-12 65124213af664a68ad88ce7f6dcb133116d7702f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--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"
            ></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>