最近在做一个uniapp的项目的时候，碰到了一个Tab选项卡的需求，我立马就想到了曾经在视频里看到的利用swiper实现丝滑选项卡的功能。
但是很遗憾，我并没有光看就会的本事，本着遇事不决先百度的原则，就在百度找了一篇真实有用，但是有小小bug的，下面是原po地址：
uni-app使用swiper切换页面每个滑块高度自适应
懒得点的可以接着往下看哈，我也会把详细步骤以及碰到的bug贴出来。下面是我改造后的效果图
首先就是Tab选项卡的点击切换块，这里我是用了小程序自带的scroll-view来实现的，同时给该元素添加scroll-into-view属性来实现点击跟踪（其实这效果不是特别好，我期望的效果是点击这个的时候还留点位置给上一个，但是我太菜了加上为了省事所以就直接用这个了）
<scroll-view scroll-x="true" class="tab-h" :scroll-into-view="scroll_into" :scroll-with-animation="true">
<view class="tab-item" :class="currenTab==0 ? 'tab-bar-active' : ''"
:data-current="0" @tap="change_tab" id="detail">班级详情</view>
scroll-into-view的用法可自行查阅官方文档
接着是swiper标签块，这里因为实现都一样，所以我就直接把原博客那边的贴过来了，大家根据自己的需求更改类名及swiper-item内部的组件即可
<swiper :style="{'height':swiperHeight+'px'}" class="swiper" :current="currentTab" duration="300" @change="change_swiper">
<swiper-item>
<musichall class="component"></musichall>
</swiper-item>
<swiper-item>
<play class="component"></play>
</swiper-item>
<swiper-item>
<musiclist class="component"></musiclist>
</swiper-item>
</swiper>
这里有个注意点，就是要给swiper-item内部的组件(盒子)一个相同的类名，后面获取高度时需要用到。
初始数据方面，这里我也把我的初始数据贴出来，大家根据需求自行修改即可
data() {
return {
swiperHeight:'',
// 当前选中tab索引
currentTab: 0,
// 当前滚动条滚动到id位置
scroll_into: '',
tab_bar: [{
id: 'detail',
tit: '班级详情'
},
{
id: 'course',
tit: '班级课程'
}
],
}
},
后面的方法本来想一个个贴的，但是发现好像有点乱，所以就直接全贴出来了，里面的逻辑大伙应该能理清吧哈哈
mounted() {
this.setSwiperHeight()
},
methods: {
// 点击tabbar事件
change_tab(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.run_tab(index)
},
// swiper滑动事件
change_swiper(e){
let index = e.target.current || e.detail.current;
this.run_tab(index)
},
// 获取高度方法
setSwiperHeight(){
let query = uni.createSelectorQuery().in(this);
query.selectAll(".component").boundingClientRect();
query.exec((res) => {
this.swiperHeight = res[0][this.currentTab].height;
})
},
// 执行整个tab事件
run_tab(index){
// 记录当前滑动的位置
this.scroll_into = this.tab_bar[index].id
this.current_tab = index
this.setSwiperHeight()
},
}
到这里js部分也结束了，最后是css部分，我就是在这里踩坑的。原博最后面说要给swiper-item里面的组件设置一个min-height: 100%。这样设置之后就会有个问题，也就是
当把组件的高度赋给swiper的时候，这个min-height也会同步变成这个高度。而后续如果切换到高度较小的盒子时，因为min-height的限制，所以高度就会保持在最大的盒子高度上。
因此大家在初始化css数据的时候需要注意一下，这里我也把我的初始css贴出来，大家根据需求自行修改即可
.swiper{
height: 500rpx;
margin: 20upx;
.component{
min-height: 500rpx;
}
}
到这里这一块的内容就全部结束了，噢对了关于setSwiperHeight里面获取dom元素的方法，也就是
uni.createSelectorQuery()。这玩意说实话我也搞不太懂，总之就跟selectorQuery选择器差不多，CVM大法：复制粘贴，然后修改数据即可。
第一次正经写文还是很紧张的哈哈，希望能帮到有需要的人。谢谢各位
