uniapp获取swiper中子组件的内容高度

swiper有默认高度,如果不单独设置一个具体高度,swiper后面的内容将不会展示

这里展示的例子是: swiper中放有一个子组件,想要完整展示子组件的内容,swiper就需要获取到子组件的内容高度并设置

html 复制代码
	<!-- 注意: 这里的单位是 px,不是rpx -->
	<swiper @change="onChangeTab" :current="navIndex" :style="'height:'+clentHeight+'px'">
		<swiper-item>
			<view class="recommend-height">
				<Recommend></Recommend>	
			</view>
		</swiper-item>		
	</swiper>
javascript 复制代码
// 获取swiper内容的整体高度 
 onReady() { 
	let view = uni.createSelectorQuery().select('.recommend-height')
	view.boundingClientRect((data) => {
		this.clentHeight = data.height
		console.log(data.height)
	}).exec()
 },
相关推荐
大麦大麦6 小时前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass
逍遥客.8 小时前
uniapp对接打印机和电子秤
javascript·vue.js·uni-app
小钟H呀10 小时前
Uniapp项目运行到微信小程序、H5、APP等多个平台教程
uni-app
HerayChen11 小时前
uniapp vue3 微信小程序 uni.chooseLocation使用
微信小程序·小程序·uni-app·微信小程序地理位置
pillowss15 小时前
uniapp中image加载图片失败解决方案
uni-app
bug总结15 小时前
uniapp+微信小程序+地图+传入多个标记点显示+点击打开内置地图导航+完整代码
uni-app
码农研究僧15 小时前
Uniapp 页面返回不刷新?两种方法防止 onShow 触发多次请求!
uni-app·vue·html·onshow
阿常1121 小时前
uni-app基础拓展
前端·javascript·uni-app