fix(ImageViewer): fix the scale problem of imageViewer (#782)

Tencent · Aug 22, 2022 · 393ca3c · 393ca3c
1 parent 3ccc0c7
commit 393ca3c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "site:prerender": "node script/prerender.mjs",
     "cover": "jest --coverage",
     "test": "jest && jest -c jest.e2e.config.js",
+    "test:demo": "node gen-demo-test.js",
     "test:unit": "jest",
     "test:e2e": "jest -c jest.e2e.config.js",
     "badge": "node script/coverage-badge.js",
@@ -119,4 +120,4 @@
   "dependencies": {
     "dayjs": "^1.10.7"
   }
-}
+}
diff --git a/src/image-viewer/_example/base/index.js b/src/image-viewer/_example/base/index.js
@@ -12,9 +12,12 @@ Component({
     clickHandle() {
       this.setData({
         images: [
-          ...Array.from({ length: 6 }).fill(
-            'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview1.png',
-          ),
+          'https://oteam-tdesign-1258344706.cos-internal.ap-guangzhou.tencentcos.cn/site/miniprogram-doc/doc-steps.png',
+          'https://oteam-tdesign-1258344706.cos-internal.ap-guangzhou.tencentcos.cn/site/miniprogram-doc/demo/image-viewer/demo-image.png',
+          'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview1.png',
+          'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview2.png',
+          'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview3.png',
+          'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview4.png',
         ],
         showIndex: true,
         visible: true,

diff --git a/src/image-viewer/image-viewer.less b/src/image-viewer/image-viewer.less
@@ -41,9 +41,9 @@
     transform: translateY(-50%);
   }
 
-  .t-class-image {
-    width: inherit !important;
-    height: inherit !important;
+  .t-image--external {
+    width: inherit;
+    height: inherit;
     display: block;
   }
 

diff --git a/src/image-viewer/image-viewer.ts b/src/image-viewer/image-viewer.ts
@@ -57,51 +57,35 @@ export default class ImageViewer extends SuperComponent {
 
     calcImageDisplayStyle(imageWidth, imageHeight) {
       const { windowWidth, windowHeight } = this.data;
+      const ratio = imageWidth / imageHeight;
       // 图片宽高都小于屏幕宽高
       if (imageWidth < windowWidth && imageHeight < windowHeight) {
         return {
-          mode: 'scaleToFill',
           styleObj: {
-            width: '100%',
+            width: `${imageWidth * 2}rpx`,
             height: `${imageHeight * 2}rpx`,
-          },
-        };
-      }
-
-      // 图片宽高都大等于屏幕宽高
-      if (imageWidth >= windowWidth && imageHeight >= windowHeight) {
-        return {
-          mode: 'aspectFit',
-          styleObj: {
-            width: '100%',
-            height: `${(imageHeight / (imageWidth / windowWidth)) * 2}rpx`,
-          },
-        };
-      }
-
-      // 图片超高：图片宽小于屏幕宽，图片高大于等于屏幕高
-      if (imageWidth < windowWidth && imageHeight >= windowHeight) {
-        return {
-          mode: 'widthFix',
-          styleObj: {
-            width: `${(imageWidth / (imageHeight / windowHeight)) * 2}rpx`,
-            height: '100vh',
             left: '50%',
             transform: 'translate(-50%, -50%)',
           },
         };
       }
-
-      // 图片超宽：图片宽大于等于屏幕宽，图片高小于屏幕高
-      if (imageWidth >= windowWidth && imageHeight < windowHeight) {
+      // 图片宽高至少存在一个大于屏幕宽高，此时判断图片宽高比，按长边显示
+      if (ratio >= 1) {
         return {
-          mode: 'heightFix',
           styleObj: {
-            width: '100%',
-            height: `${(imageHeight / (imageWidth / windowWidth)) * 2}rpx`,
+            width: '100vw',
+            height: `${(windowWidth / ratio) * 2}rpx`,
           },
         };
       }
+      return {
+        styleObj: {
+          width: `${ratio * windowHeight * 2}rpx`,
+          height: '100vh',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        },
+      };
     },
 
     onImageLoadSuccess(e: WechatMiniprogram.TouchEvent) {

diff --git a/src/image-viewer/image-viewer.wxml b/src/image-viewer/image-viewer.wxml
@@ -17,9 +17,9 @@
           bind:tap="onClose"
         >
           <t-image
-            t-class="t-class-image"
+            t-class="t-image--external"
             style="{{imagesShape[index].style}}"
-            mode="{{imagesShape[index].mode}}"
+            mode="aspectFit"
             lazy
             src="{{item}}"
             data-index="{{index}}"