最近在做一個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大法：復制粘貼，然后修改數據即可。
第一次正經寫文還是很緊張的哈哈，希望能幫到有需要的人。謝謝各位
