在写项目的时候，发现在swiper页面中加入写好的组件后，可能只显示轮播图，也就是大概150px的高度，这是因为swiper默认高度为150px，我上网查询几种方法，发现最好的还根据盒子高度动态绑定高度这一种兼容性最好。

首先，定义一个变量：

	// 获取默认高度
	const swiperHeight=ref(0) // 滑块的高度(单位px)

其次，查询uniapp官网，使用

let viewS=uni.createSelectorQuery().select('.home-data');

api获取到dom的属性值，注意细节就是在页面渲染以后在进行拉取，否则可能为空。

	// 动态获取swiper高度
	onReady(()=>{
		let viewS=uni.createSelectorQuery().select('.home-data');
		viewS.boundingClientRect().exec(res=>{
			swiperHeight.value=res[0].height
		})
	})

相关api的意思与语法作用，解释如下：

1. onReady(()=>{ ... }):
   这个函数是 UniApp 的生命周期函数之一。onReady 会在页面加载完成后被调用，确保所有的 DOM 元素都已渲染，可以进行相关的 DOM 操作。

2. let viewS=uni.createSelectorQuery().select('.home-data');:

   • uni.createSelectorQuery(): 这是一个用于查询 DOM 节点的 API。可以帮助开发者获取页面上某些元素的信息，比如位置、尺寸等。
   • .select('.home-data'): 选择 class 为 home-data 的元素，返回一个查询对象 viewS。

3. viewS.boundingClientRect().exec(res=>{ ... });:

   • boundingClientRect(): 这个方法用于获取选中元素的位置信息，包括宽度、高度和位置等。
   • .exec(...): 执行查询，并在查询完成后执行传入的回调函数。查询结果会作为参数 res 传递给回调函数。

最后，注意从uniapp中引入onReady生命周期钩子...

import {onReady} from '@dcloudio/uni-app'

如果有跟好的想法，欢迎指导