選項卡組件
1.pages.json
{
"easycom": {
"autoscan": true,
"custom": {
"scroll-tabs": "@/components/ScrollTabs/index.vue",
}
},
......
}
2.index.vue
<template>
<view class="pages">
<view class="news_list">
<scroll-tabs v-model="newsType" tabs="tabs" @change="changeTab"></scroll-tabs>
<swiper class="tabs_swiper"
:current="newsType"
@change="changeSwiper"
@transition="handleOnTransition">
<swiper-item :label="item" v-for="(item,index) in tabs" :key="index">
<template v-if="actMap[index]">
<news-list v-if="item==='全部'"/>
<news-list v-else-if="item==='tabs1'" />
<video-list v-else-if="item==='tabs2'"/>
<news-list v-else-if="item==='tabs3'"/>
<news-list v-else-if="item==='tabs4'"/>
</template>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data(){
return{
newsType:0,
actMap: { 0: true }, // 已經(jīng)加載的 tab, 用來優(yōu)化 tab 一次性全部加載的問題
tabs:['全部','tabs1','tabs2','tabs3','tabs4']
}
},
computed: {
_windowWidth () {
return uni.$deviceInfo.windowWidth
},
}
methods:{
changeTab(type){
this.newsType = type
},
changeSwiper(e) {
this.newsType = e.detail.current
},
handleOnTransition(e){
/**
* 用來在 swiper 切換時匣掸，提前判定當(dāng)前 item 是否需要加載，以用來優(yōu)化頁面加載觸發(fā)時間匪补，優(yōu)化加載速度
* 由于 handleOnChange 觸發(fā)時間是動畫結(jié)束后，item 加載觸發(fā)過慢
*/
const { dx } = e.detail
if (dx > 0 && Math.abs(dx) > this._windowWidth / 2) {
this.$set(this.actMap, this.newsType + 1, true)
}
if (dx < 0 && Math.abs(dx) > this._windowWidth / 2) {
this.$set(this.actMap, this.newsType - 1, true)
}
}
},
}
</script>
<style lang=scss>
</style>
