优化动画

src/views/mine-orchestra/photo-list/detail.tsx

@@ -7,6 +7,7 @@ import {
   GridItem,
   Image,
   ImagePreview,
+  ImagePreviewInstance,
   List,
   Loading,
   showFailToast,
@@ -14,7 +15,7 @@ import {
   showLoadingToast,
   showSuccessToast
 } from 'vant'
-import { computed, defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
+import { computed, defineComponent, onMounted, reactive, TransitionGroup, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
@@ -37,6 +38,7 @@ export default defineComponent({
     console.log('🚀 ~ route', route)
     const data = reactive({
       downLoading: false,
+      downIndex: 0,
       refreshing: false,
       loading: false,
       finished: false,
@@ -84,15 +86,22 @@ export default defineComponent({
         return file.fileUrl
       })
     })
+    const imgPreviewRef = ref<ImagePreviewInstance>()
     // 预览图片
     const onShowImage = (index: number) => {
-      data.startPosition = index
+      data.downIndex = data.startPosition = index
       data.imgShow = true
+      // showImagePreview({
+      //   images: images.value,
+      //   closeable: true,
+      //   startPosition: data.startPosition,
+      //   onChange: (index: number) => (data.startPosition = index),
+      // })
     }
     const saveImg = async () => {
-      if (data.downLoading) return;
+      if (data.downLoading) return
       const container: HTMLElement = document.querySelector(
-        `[data-src='${images.value[data.startPosition]}'] img`
+        `img[src='${images.value[data.downIndex]}']`
       )!
       if (container) {
         const t = showLoadingToast({
@@ -180,13 +189,13 @@ export default defineComponent({
           </div>
         </OFullRefresh>
         <ImagePreview
+          ref={imgPreviewRef}
           v-model:show={data.imgShow}
           startPosition={data.startPosition}
           images={images.value}
-          onChange={(index: number) => (data.startPosition = index)}
+          onChange={(index: number) => (data.downIndex = index)}
         >
           {{
-            image: ({ src }) => <Image data-src={src} fit="contain" src={src} />,
             cover: () => (
               <div class={styles.downBtn} onClick={() => saveImg()}>
                 <img src={iconDown} />