76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<van-tabs
|
|
v-model:active="tabActive"
|
|
:animated="true"
|
|
:scrollspy="false"
|
|
shrink
|
|
:lazy-render="true"
|
|
swipeable
|
|
@rendered="onTabRendered"
|
|
class="tabs"
|
|
>
|
|
<van-tab v-for="item in secondTab" :key="item.id" :title="item.moduleName" :name="item.id">
|
|
<template v-if="tabIsInit(item.id)">
|
|
<coverSeekType
|
|
:moduleId="item.id"
|
|
:id="prefixKey + item.id"
|
|
class="contain overflow-y-auto"
|
|
:pureVersion="item.pureVersion"
|
|
/>
|
|
</template>
|
|
</van-tab>
|
|
</van-tabs>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import tabAction from '@/utils/tabAction';
|
|
import { useGlobalStore } from '@/stores/global';
|
|
import coverSeekType from '../components/coverSeekType.vue';
|
|
const globalStore = useGlobalStore();
|
|
const secondTab = computed(() => {
|
|
return [
|
|
{
|
|
moduleName: '热门推荐',
|
|
id: 'all',
|
|
},
|
|
...(globalStore.tabObj.pics || []),
|
|
];
|
|
});
|
|
|
|
const prefixKey = 'seek_page_';
|
|
const { tabActive, tabIsInit, onTabRendered } = tabAction(true, prefixKey);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tabs {
|
|
--van-tabs-nav-background: transparent;
|
|
--van-tab-active-text-color: #fff;
|
|
--van-tab-text-color: #9fa19f;
|
|
--van-padding-xs: 6px;
|
|
|
|
:deep(> .van-tabs__wrap) {
|
|
.van-tabs__nav--line {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.van-tab__text {
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.van-tabs__line {
|
|
width: 16px;
|
|
height: 2px;
|
|
border-radius: 12px;
|
|
background: #ffc000;
|
|
bottom: 4px;
|
|
}
|
|
}
|
|
|
|
.contain {
|
|
height: calc(100vh - 44px * 3);
|
|
}
|
|
}
|
|
</style>
|