diff --git a/src/pages/item/espier-detail.js b/src/pages/item/espier-detail.js index 2053e4c39..868c932db 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(() => { @@ -304,15 +306,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) { @@ -338,7 +349,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 @@ -348,9 +359,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) } @@ -502,7 +513,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) => ( @@ -846,7 +857,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) => (