ソースを参照

fix: 京东小程序imagepreview适配 (#1847)

yangxiaolu1993 3 年 前
コミット
102b7f0a21

+ 5 - 0
src/packages/__VUE/imagepreview/index.scss

@@ -13,6 +13,11 @@
     object-fit: contain;
     object-fit: contain;
   }
   }
 
 
+  &-taro-img {
+    width: 100%;
+    height: 100%;
+  }
+
   &-index {
   &-index {
     position: fixed;
     position: fixed;
     z-index: 2002;
     z-index: 2002;

+ 7 - 3
src/packages/__VUE/imagepreview/index.taro.vue

@@ -15,8 +15,8 @@
         :pagination-color="paginationColor"
         :pagination-color="paginationColor"
       >
       >
         <nut-swiper-item v-for="(item, index) in images" :key="index">
         <nut-swiper-item v-for="(item, index) in images" :key="index">
-          <!-- <image mode="aspectFit" :src="item.src" class="nut-imagepreview-img" /> -->
-          <img :src="item.src" mode="aspectFit" class="nut-imagepreview-img" />
+          <image mode="aspectFit" :src="item.src" class="nut-imagepreview-taro-img" v-if="ENV != ENV_TYPE.WEB" />
+          <img :src="item.src" mode="aspectFit" class="nut-imagepreview-img" v-else />
         </nut-swiper-item>
         </nut-swiper-item>
       </nut-swiper>
       </nut-swiper>
     </view>
     </view>
@@ -36,6 +36,7 @@ import SwiperItem from '../swiperitem/index.taro.vue';
 import Icon from '../icon/index.taro.vue';
 import Icon from '../icon/index.taro.vue';
 import { isPromise } from '@/packages/utils/util';
 import { isPromise } from '@/packages/utils/util';
 import { ImageInterface } from './types';
 import { ImageInterface } from './types';
+import Taro from '@tarojs/taro';
 const { create } = createComponent('imagepreview');
 const { create } = createComponent('imagepreview');
 
 
 export default create({
 export default create({
@@ -118,7 +119,10 @@ export default create({
         originScale: 1,
         originScale: 1,
         oriDistance: 1
         oriDistance: 1
       },
       },
-      lastTouchEndTime: 0 // 用来辅助监听双击
+      lastTouchEndTime: 0, // 用来辅助监听双击
+
+      ENV: Taro.getEnv(),
+      ENV_TYPE: Taro.ENV_TYPE
     });
     });
 
 
     const styles = computed(() => {
     const styles = computed(() => {

+ 5 - 8
src/sites/mobile-taro/vue/src/exhibition/pages/imagepreview/index.vue

@@ -39,16 +39,16 @@ export default {
       showPreview4: false,
       showPreview4: false,
       imgData: [
       imgData: [
         {
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+          src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg'
         },
         },
         {
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+          src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
         },
         },
         {
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+          src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
         },
         },
         {
         {
-          src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+          src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
         }
         }
       ],
       ],
       videoData: [
       videoData: [
@@ -104,7 +104,4 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style lang="scss" scoped>
-.demo {
-}
-</style>
+<style lang="scss"></style>