【uni-app】記一個 scroll-view +swiper實現順滑Tab選項卡

最近在做一個uniapp的項目的時候,碰到了一個Tab選項卡的需求,我立馬就想到了曾經在視頻里看到的利用swiper實現絲滑選項卡的功能。

但是很遺憾,我并沒有光看就會的本事,本著遇事不決先百度的原則,就在百度找了一篇真實有用,但是有小小bug的,下面是原po地址:

uni-app使用swiper切換頁面每個滑塊高度自適應
懶得點的可以接著往下看哈,我也會把詳細步驟以及碰到的bug貼出來。下面是我改造后的效果圖

image

首先就是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大法:復制粘貼,然后修改數據即可。

第一次正經寫文還是很緊張的哈哈,希望能幫到有需要的人。謝謝各位

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容