.

src/pages/details/components/ImageList/index.jsx

@@ -0,0 +1,62 @@
+import Taro from "@tarojs/taro";
+import { Image, Swiper, SwiperItem, View, Text } from "@tarojs/components";
+import { useState} from "react";
+import { compressImage } from '@/utils'
+import './style.less'
+
+//详情页面上面的滑动图集
+export default (props) => {
+  const { imglist } = props
+  const [swiperHeight, setSwiperHeight] = useState()
+  const [swiperImgHeightList, setSwiperImgHeightList] = useState([])
+  const [swiperImgWidthList, setSwiperImgWidthList] = useState([])
+  const handleImageOnLoad = (e, inx) => {
+    const { detail } = e;
+    const { height, width } = detail || {}
+    if (height) {
+      const heightList = swiperImgHeightList.slice()
+      heightList[inx] = height
+      setSwiperImgHeightList(heightList)
+      const widthList = swiperImgWidthList.slice()
+      widthList[inx] = width
+      setSwiperImgWidthList(widthList)
+      if (!swiperHeight && inx === 0) {
+        let { screenWidth } = Taro.getSystemInfoSync()
+        let nowHeight = (screenWidth - 30) * height / width
+        setSwiperHeight(`${nowHeight}px`)
+      }
+    }
+  }
+
+  const [index, setIndex] = useState(0);
+  const handchange = (e) => {
+    const inx = e.detail.current
+    setIndex(inx);
+    const height = swiperImgHeightList[inx]
+    const width = swiperImgWidthList[inx]
+    let { screenWidth } = Taro.getSystemInfoSync()
+    let nowHeight = (screenWidth - 30) * height / width
+    setSwiperHeight(nowHeight ? `${nowHeight}px` : 'auto')
+  };
+  return (
+    <View className='huadong'>
+      <Swiper
+        circular
+        className='swiper'
+        onChange={handchange}
+        style={{ height: swiperHeight }}
+      >
+        {imglist.map((item, inx) => (
+          <SwiperItem key={inx}>
+            <Image src={compressImage(item.url)} mode='widthFix' className='storeImage' onLoad={(e) => handleImageOnLoad(e, inx)} />
+          </SwiperItem>
+        ))}
+      </Swiper>
+      <View className='tpPage'>
+        <Text>
+          {index + 1}/{imglist.length}
+        </Text>
+      </View>
+    </View>
+  )
+}

src/pages/details/components/ImageList/style.less

@@ -0,0 +1,27 @@
+.huadong{    
+  position: relative;
+  .swiper {
+    transition: all 0.3s linear;
+    .storeImage {
+      border-radius: 22px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .tpPage {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    background: #000000;
+    border-radius: 16px;
+    font-size: 24px;
+    color: #ffffff;
+    padding: 0 7px;
+    opacity: 0.4;
+    line-height: 32px;
+    padding: 7px 8px 8px 7px;
+    text {
+      opacity: 0.64;
+    }
+  }  
+}

src/pages/details/foodDetails/foodDetails.jsx

@@ -8,8 +8,7 @@ import {
 } from "@/services/home";
 import { getVerifyTargetList } from "@/services/payOrder";
 import { useState, useEffect, useRef } from "react";
-import { Button, Swiper, SwiperItem, View, Ad } from "@tarojs/components";
-import { compressImage } from '@/utils'
+import { Button,View, Ad } from "@tarojs/components";
 import Star from "@/components/Star/Star.jsx";
 import NoData from '@/components/NoData'
 import Cards from "@/components/foodCards/foodCards.jsx";
@@ -28,15 +27,14 @@ import weibaozan from "@/assets/icons/housemantj/unLike.png";
 import useSave from "@/utils/hooks/useSave";
 import useLike from "@/utils/hooks/useLike";
 import Extend from "../components/Extend/extend";
+import ImageList from "../components/ImageList";
 import logo from "./laba.png";
-
 import "./foodDetails.less";
 
 export default withLayout((props) => {
   const { router, person, location } = props;
   const { id, subOrderId, scene } = props.router.params;
 
-
   useEffect(() => {
     if (id && (scene || subOrderId)) {
       getVerifyTargetList({
@@ -60,10 +58,6 @@ export default withLayout((props) => {
   const [spackage, setPackage] = useState([]);
   //banner图集数组
   const [imglist, setimglist] = useState([]);
-  const [index, setIndex] = useState(0);
-  const handchange = (e) => {
-    setIndex(e.detail.current);
-  };
 
   const [isSaved, toggleSave] = useSave(detail.isSaved, "shop", id);
   const [isLike, toggleLike] = useLike(detail.isLike, "shop", id);
@@ -143,7 +137,6 @@ export default withLayout((props) => {
   const [isScroll, setScroll] = useState(true)
   return (
     <view className='page-index'>
-
       {
         guidance === 'shareOn' ? <view className='index-navbar'>
           <add-tipsFood logo={logo} custom duration={-1} />
@@ -153,31 +146,13 @@ export default withLayout((props) => {
             <CustomNav title='十公里' />
           </view>
       }
-
       <SpinBox loading={loading} className='index-container' style={{ padding: '0 30rpx', background: '#F8F8F8' }}>
         <scroll-view
           scrollY={isScroll}
           style={{ height: '100%' }}
         >
           <view className='storeDetails'>
-            <View className='huadong'>
-              <Swiper
-                circular
-                className='swiper'
-                onChange={handchange}
-              >
-                {imglist.map((item, inx) => (
-                  <SwiperItem key={inx}>
-                    <image src={compressImage(item.url)} mode='aspectFit' className='storeImage' />
-                  </SwiperItem>
-                ))}
-              </Swiper>
-              <view className='tpPage'>
-                <text>
-                  {index + 1}/{imglist.length}
-                </text>
-              </view>
-            </View>
+            <ImageList imglist={imglist} />
             <view className='storeJs'>
               <view style={{ overflow: "hidden" }}>
                 <view className='storeName'>{detail.shopName}</view>
@@ -254,10 +229,10 @@ export default withLayout((props) => {
                     <image src={titlezs} />
                     <text>本店指南</text>
                   </view>
-                  <View style={{background:'#FFF'}}>
-                  {(extend || []).map((item) => (
-                    <Extend key={item.extId} item={item} />
-                  ))}
+                  <View style={{ background: '#FFF' }}>
+                    {(extend || []).map((item) => (
+                      <Extend key={item.extId} item={item} />
+                    ))}
                   </View>
                 </view>
                 <view

src/pages/details/foodDetails/foodDetails.less

@@ -1,34 +1,7 @@
 .storeDetails {
   background-color: #fff;
   border-radius: 12px;
-  margin-bottom: 20px;
-  .huadong{    
-    position: relative;
-    .swiper {
-      height: calc((100vw - 60px) * 0.6);
-      .storeImage {
-        border-radius: 22px;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .tpPage {
-      position: absolute;
-      right: 20px;
-      bottom: 20px;
-      background: #000000;
-      border-radius: 16px;
-      font-size: 24px;
-      color: #ffffff;
-      padding: 0 7px;
-      opacity: 0.4;
-      line-height: 32px;
-      padding: 7px 8px 8px 7px;
-      text {
-        opacity: 0.64;
-      }
-    }  
-  }
+  margin-bottom: 20px;  
   .storeJs {
     padding: 20px;
     .storeName {

src/pages/details/mjDetails/sceneryDetails.jsx

@@ -3,7 +3,6 @@ import ax from '@/assets/icons/housemantj/onlove.png'
 import dw from '@/assets/icons/housemantj/loc-o.png'
 import titlejd from '@/assets/icons/housemantj/goodTourist.png'
 import titlems from '@/assets/icons/housemantj/goodFood.png'
-import { compressImage } from '@/utils'
 import share from '@/assets/icons/housemantj/touristShare.png'
 import good from '@/assets/icons/housemantj/touristGood.png'
 import baozan from '@/assets/icons/housemantj/bgood.png'
@@ -14,12 +13,13 @@ import SpinBox from "@/components/Spin/SpinBox";
 import TabIcon from '@/components/HorTabbar/TabIcon'
 import { useState, useEffect } from 'react'
 import { getTouristDetail, getExtendContent, getRecommendList } from '@/services/home'
-import { Swiper, SwiperItem, Button, View, Ad } from '@tarojs/components';
+import { Button, View, Ad } from '@tarojs/components';
 import useSave from "@/utils/hooks/useSave"
 import useLike from "@/utils/hooks/useLike"
 import Cards from '@/components/foodCards/foodCards.jsx'
 import Taro, { useShareAppMessage } from '@tarojs/taro'
 import Extend from '../components/Extend/extend'
+import ImageList from "../components/ImageList";
 import logo from "../foodDetails/laba.png";
 
 import './sceneryDetails.less'
@@ -34,10 +34,6 @@ export default withLayout((props) => {
 
   //banner图集数组
   const [imglist, setimglist] = useState([])
-  const [index, setIndex] = useState(0)
-  const handchange = (e) => {
-    setIndex(e.detail.current)
-  }
 
   //本店指南
   const [extend, setExtend] = useState([])
@@ -114,25 +110,7 @@ export default withLayout((props) => {
       <SpinBox loading={loading} className='index-container' style={{ padding: '0 30rpx', background: '#F8F8F8' }}>
         <scroll-view scrollY style={{ height: '100%' }}>
           <view className='storeDetails'>
-            <View className='huadong'>
-              <Swiper
-                className='swiper'
-                circular
-                onChange={handchange}
-              >
-                {
-                  imglist.map((item) => (
-                    <SwiperItem>
-                      <image src={compressImage(item.url)} mode='aspectFit' className='storeImage' />
-                    </SwiperItem>
-                  ))}
-              </Swiper>
-              <view className='tpPage'>
-                <text>
-                  {index + 1}/{imglist.length}
-                </text>
-              </view>
-            </View>
+            <ImageList imglist={imglist} />
 
             <view className='storeJs'>
               <view className='introduce'>

src/pages/details/mjDetails/sceneryDetails.less

@@ -1,34 +1,7 @@
 .storeDetails {
   background-color: #fff;
   border-radius: 12px;
-  margin-bottom: 20px;
-  .huadong{    
-    position: relative;
-    .swiper {
-      height: calc((100vw - 60px) * 0.6);
-      .storeImage {
-        border-radius: 22px;
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .tpPage {
-      position: absolute;
-      right: 20px;
-      bottom: 20px;
-      background: #000000;
-      border-radius: 16px;
-      font-size: 24px;
-      color: #ffffff;
-      padding: 0 7px;
-      opacity: 0.4;
-      line-height: 32px;
-      padding: 7px 8px 8px 7px;
-      text {
-        opacity: 0.64;
-      }
-    }  
-  }
+  margin-bottom: 20px;  
   .storeJs {
     padding: 22px;
     .introduce {