From ac2678de96774d04e2481cb339a5f1da4cb7b1d0 Mon Sep 17 00:00:00 2001 From: maqian Date: Thu, 16 Oct 2025 11:57:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=9B=BE=E7=89=87=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/item/espier-detail.js | 31 ++++++++----- src/subpages/guide/item/espier-detail.js | 55 +++++++++++++++++------- 2 files changed, 60 insertions(+), 26 deletions(-) diff --git a/src/pages/item/espier-detail.js b/src/pages/item/espier-detail.js index e29767059..234fee801 100644 --- a/src/pages/item/espier-detail.js +++ b/src/pages/item/espier-detail.js @@ -103,7 +103,8 @@ const initialState = { recommendList: [], isParameter: false, imgHeightList: [], // 用于存储banner高度 - navigateMantle: false + navigateMantle: false, + defaultImageHeight: 520 // 默认图片高度，避免空白 } function EspierDetail(props) { @@ -141,7 +142,8 @@ function EspierDetail(props) { recommendList, isParameter, imgHeightList, - navigateMantle + navigateMantle, + defaultImageHeight } = state useEffect(() => { @@ -303,15 +305,24 @@ function EspierDetail(props) { } }) } - const banner = await getMultipleImageInfo(data.imgs) setState((draft) => { draft.info = { ...data, subscribe } draft.play = data.video ? true : false // 辉绮需求 - draft.imgHeightList = banner draft.promotionActivity = data.promotionActivity + // 初始化图片高度数组，使用默认高度 + draft.imgHeightList = new Array(data.imgs.length).fill(draft.defaultImageHeight) + }) + + // 异步计算图片真实高度，不阻塞页面渲染 + getMultipleImageInfo(data.imgs).then(heights => { + setState((draft) => { + draft.imgHeightList = heights + }) + }).catch(error => { + console.log('计算图片高度失败，使用默认高度:', error) }) if (isAPP() && userInfo) { @@ -337,7 +348,7 @@ function EspierDetail(props) { } } const getMultipleImageInfo = async (imageUrls = []) => { - let windowWidth = 375 + let windowWidth = defaultImageHeight try { const sys = Taro.getSystemInfoSync() if (sys && sys.windowWidth) windowWidth = sys.windowWidth @@ -347,9 +358,9 @@ function EspierDetail(props) { const promises = imageUrls.map(async (url) => { try { - const info = await Taro.getImageInfo({ src: url }) - const imgWidth = Number(info?.width) || 0 - const imgHeight = Number(info?.height) || 0 + const imageInfo = await Taro.getImageInfo({ src: url }) + const imgWidth = Number(imageInfo?.width) || 0 + const imgHeight = Number(imageInfo?.height) || 0 if (imgWidth > 0 && imgHeight > 0) { return Math.round((windowWidth * imgHeight) / imgWidth) } @@ -501,7 +512,7 @@ function EspierDetail(props) { className='goods-swiper' // current={curImgIdx} onChange={onChangeSwiper} - style={{ height: imgHeightList[curImgIdx] + 'px' }} + style={{ height: (imgHeightList[curImgIdx] || defaultImageHeight) + 'px' }} > {info.imgs.map((img, idx) => ( @@ -845,7 +856,7 @@ function EspierDetail(props) { {info?.itemParams?.map((item, index) => { return ( - + {item.attribute_name} {item.attribute_value_name} diff --git a/src/subpages/guide/item/espier-detail.js b/src/subpages/guide/item/espier-detail.js index ca39ca1d2..7171f267d 100644 --- a/src/subpages/guide/item/espier-detail.js +++ b/src/subpages/guide/item/espier-detail.js @@ -87,6 +87,7 @@ const initialState = { // 多规格商品选中的规格 curItem: null, imgHeightList: [], // 用于存储banner高度 + defaultImageHeight: 520, // 默认图片高度，避免空白 } function EspierDetail(props) { @@ -122,6 +123,7 @@ function EspierDetail(props) { subtaskId, curItem, imgHeightList, // 用于存储banner高度 + defaultImageHeight, } = state useEffect(() => { @@ -254,30 +256,51 @@ function EspierDetail(props) { } }) } - const banner = await getMultipleImageInfo(data.imgs) - setState((draft) => { draft.info = { ...data, subscribe } - draft.imgHeightList = banner draft.promotionActivity = data.promotionActivity + // 初始化图片高度数组，使用默认高度 + draft.imgHeightList = new Array(data.imgs.length).fill(draft.defaultImageHeight) + }) + + // 异步计算图片真实高度，不阻塞页面渲染 + getMultipleImageInfo(data.imgs).then(heights => { + setState((draft) => { + draft.imgHeightList = heights + }) + }).catch(error => { + console.log('计算图片高度失败，使用默认高度:', error) }) } - const getMultipleImageInfo = async (imageUrls) => { - const promises = imageUrls.map(url => - Taro.getImageInfo({ src: url }) - .then(info => info) - .catch(error => { - console.log('获取图片信息失败:', url, error) - // 返回一个默认高度或 null - return { width: 0, height: 650 } - }) - ) - const results = await Promise.all(promises) - return results.map(info => (info.height) / 2 > 650 ? 650 : info.height / 2) + const getMultipleImageInfo = async (imageUrls = []) => { + let windowWidth = defaultImageHeight + try { + const sys = Taro.getSystemInfoSync() + if (sys && sys.windowWidth) windowWidth = sys.windowWidth + } catch (e) { + console.log('获取系统信息失败，使用默认宽度:', e) + } + + const promises = imageUrls.map(async (url) => { + try { + const imageInfo = await Taro.getImageInfo({ src: url }) + const imgWidth = Number(imageInfo?.width) || 0 + const imgHeight = Number(imageInfo?.height) || 0 + if (imgWidth > 0 && imgHeight > 0) { + return Math.round((windowWidth * imgHeight) / imgWidth) + } + return Math.round(windowWidth) + } catch (error) { + console.log('获取图片信息失败:', url, error) + return Math.round(windowWidth) + } + }) + + return Promise.all(promises) } // 获取包裹 @@ -387,7 +410,7 @@ function EspierDetail(props) { className='goods-swiper' // current={curImgIdx} onChange={onChangeSwiper} - style={{ height: (imgHeightList[curImgIdx]) + 'px' }} + style={{ height: (imgHeightList[curImgIdx] || defaultImageHeight) + 'px' }} > {info.imgs.map((img, idx) => (