// useCalculateSwiperHeight.ts
import { ref, onMounted } from 'vue';export function useCalculateSwiperHeight(headerSelector: string = '.header-search', tabsWrapperSelector: string = '.u-tabs .u-tabs__wrapper') {const swiperHeight = ref<number>(0);// 封裝uni.getSystemInfo為Promiseconst getSystemInfo = () => {return new Promise<UniApp.GetSystemInfoResult>((resolve) => {uni.getSystemInfo({ success: resolve });});};// 封裝元素高度查詢// 修復后的元素高度查詢封裝const getRect = (selector: string) => {return new Promise<UniNamespace.NodeInfo | null>((resolve) => {uni.createSelectorQuery().select(selector).boundingClientRect((res) => {// 處理可能返回數組的情況const result = Array.isArray(res) ? res[0] : res;resolve(result as UniNamespace.NodeInfo);}).exec();});};// 計算高度方法const calculateHeight = async () => {try {const [searchRect, tabsRect, sysInfo] = await Promise.all([getRect(headerSelector), getRect(tabsWrapperSelector), getSystemInfo()]);if (!searchRect || !tabsRect || !sysInfo) {console.error('未能獲取到必要的布局信息');return;}swiperHeight.value = sysInfo.windowHeight - (searchRect.height || 0) - (tabsRect.height || 0);} catch (error) {console.error('計算高度時發生錯誤:', error);}};// 組件掛載后自動計算onMounted(() => {calculateHeight();});// 返回高度值和重新計算的方法return {swiperHeight,recalculate: calculateHeight};
}

• 組件內使用

import { useCalculateSwiperHeight } from '@/hooks/useCalculateSwiperHeight';// #ifdef H5
const { swiperHeight } = useCalculateSwiperHeight('.header-search', '.u-tabs  .u-tabs__wrapper');
// #endif
// #ifdef MP-WEIXIN
const { swiperHeight } = useCalculateSwiperHeight('.header-search', '.u-tabs >>> .u-tabs__wrapper');
// #endif