当前位置: 首页 > news >正文

uniapp(vue3)动态计算swiper高度封装自定义hook

// 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
http://www.dtcms.com/a/188924.html

相关文章:

  • Foupk3systemX5OS TXW8移动设备
  • UE5中制作动态数字Decal
  • While语句数数字
  • 互信息:揭秘变量间的隐藏关联
  • 5.13本日总结
  • windows 强行终止进程,根据端口号
  • 【Linux 系统调试】系统的动态跟踪工具--SystemTap
  • 系统平衡与企业挑战
  • C++ 字符格式化输出
  • Linux 系统安全基线检查:入侵防范测试标准与漏洞修复方法
  • 【递归、搜索与回溯】专题一:递归(二)
  • SparkSQL 连接 MySQL 并添加新数据:实战指南
  • 微服务八股(自用)
  • hashicorp vault机密管理系统的国产化替代:安当SMS凭据管理系统,量子安全赋能企业密钥管理
  • 软考软件测评师——计算机网络
  • 【Pandas】pandas DataFrame cummin
  • NC报销单保存时,报”保存失败:fail to save VO Array ~#@“
  • SQL中联表的运用
  • EXCEL下拉菜单与交替上色设置
  • ElasticSeach快速上手笔记-入门篇
  • 为什么 import _ “github.com/go-sql-driver/mysql“ 要导入但不使用?_ 是什么意思?
  • 中电金信参编的国家标准《信息技术 中间件 消息中间件技术要求》正式发布
  • 1.3 不确定性分析
  • 云蝠智能大模型呼叫优势:技术驱动全链路升级,重塑智能交互服务新体验
  • 【JavaScript】原生 JavaScript 实现 localStorage 过期时间
  • ubuntu----100,常用命令2
  • 裸机开发的核心技术:轮询、中断与DMA
  • 定制化项目变更通知延误、流程失控?日事清用条件分支判断规范跨部门协作与变更管理流程
  • STM32 __main
  • Python实验2