uniapp 解决swiper Tab选项卡切换高度自适应问题

最新推荐文章于 2025-05-09 20:54:58 发布

侠课

最新推荐文章于 2025-05-09 20:54:58 发布

阅读量1.5w

点赞数 8

CC 4.0 BY-SA版权

文章标签： uniapp swiper高度自适应

本文链接：https://blog.csdn.net/xiakekeali/article/details/101066302

uniapp 关于swiper Tab选项卡切换高度自适应问题

问题描述：使用的是uniapp 官网案例中的一个swiper插件（uni-swiper-dot），当需要tab滚动，但是它又只能在最外层的swiper处设置一个固定的高度，纠结很久以后，终于想出了办法，我把最内层我写的东西的高度的值取出来，然后在赋值给最外层，算是完成了swiper高度自适应的问题。
作为一个前端小白，使用uniapp开发app时走过了好多的坑儿~，今天给大家分享一个自己解决的小问题，希望大神能多多指导,因为很有可能有很简单的方法解决，但是我想得太复杂了，因为我常常是一个想太多的孩砸o(╯□╰)o
在这里插入图片描述

template内代码

<swiper @change="changeTab"  :style="{height:swiperHeight+'px'}">
	<swiper-item>
		<scroll-view>
			<view class="list" style="height:200px">
			</view>
		</scroll-view>
	</swiper-item>
	<swiper-item>
		<scroll-view >
			<view class="list1" style="height:300px">
			</view>
		</scroll-view>
	</swiper-item>
</swiper>

data内代码

data() {
	return {
		listHeight:0,  //内部的高度
		swiperHeight:0,  //外部的高度
	}
}

每次打开页面都要把第一个tab的值赋给最外层，所以在onShow中赋值一次

应该是因为同异步的原因，第一次进入时不出现值，所以使用了延时10就有值了

onShow() {
	let _this = this;
	setTimeout(function(){
		let list = ".list";
		_this.getlistHeight(list);
	},10) 
}

进入不同的tab就从新赋值新的高度

methods: {
	getlistHeight(list){
		let _this = this
		let info = uni.createSelectorQuery().select(list);
		info.boundingClientRect(function(data) {
			// console.log(data)  // 获取元素的各种参数
			 _this.listHeight = data.height ; // 获取元素高度
			_this.getHeight();
		}).exec();
	},
	getHeight(){
		let _this = this;
		_this.swiperHeight = _this.listHeight;
		return _this.swiperHeight;
	},
	changeTab(e) { 
	    let _this = this;
		// 不同的tab不同的高度赋不同的值
		if(e.target.current==0){
			let list = ".list";
			_this.getlistHeight(list);
		}else if(e.target.current==1){
			let list = ".list1";
			_this.getlistHeight(list);
		}
	},
}