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

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

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

template内代码

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);
		}
	},
}
	

我只贴了实现高度自适应的代码,并不是实现tab点击切换的代码哦，实现tab切换可以参考uniapp官网的例子，希望能对大家有帮助，有问题的小可爱也可以多多留言，一起成长~

一个前端小白的发言，不专业之处还望大神多多指点，转载请说明出处