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

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

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

swiper需要指定固定高度，但数据是动态加载的，所以高度需要自适应。

基本思路：就是获取展示内容的高度 赋值给swiper。但是中间有好多坑，淌过了在这里分享一下思路，经验不足，有改进的地方欢迎多多指点

data() {

return {

tabList3: [

{

name: 'tab1'

},

{

name: 'tab2'

}

],

TabCur3: 0,

listHeight:0, //内部的高度

swiperHeight:0, //外部的高度

}

}

watch: {

//监听list1数据

typeFirstList: function() {

let _this = this;

this.$nextTick(function() {

_this.initSwiperHeight('.list1');

})

}

},

methods: {

initSwiperHeight(list){

let _this = this;

let info = uni.createSelectorQuery().select(list);

info.boundingClientRect(function(data) {

_this.swiperHeight = data.height + 10;

}).exec();

},

swiperChange3(e) {

// let _this = this;

// let { current } = e.target;

this.TabCur3 = e.target.current;

// 不同的tab不同的高度赋不同的值

if(this.TabCur3==1){

// let list = ".list2";

this.initSwiperHeight('.list2');

}else{

this.initSwiperHeight('.list1');

}

}

}

代码可能不全，但整体思路都在上边了