You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
2.5 KiB
136 lines
2.5 KiB
<template>
|
|
<view class="warp">
|
|
<view class="top_list">
|
|
<view class="top_tab">
|
|
<view
|
|
class="tab_list"
|
|
v-for="(item,index) in topNavList"
|
|
:key="index"
|
|
@tap="onTopTabs(index)"
|
|
>
|
|
<view class="tab_item" :class="tabIndex==index?'active':''">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="swiper" :style="'height: calc(100vh - '+height+'rpx)'">
|
|
<swiper
|
|
class="swiper_css"
|
|
ref="swiper1"
|
|
:duration="300"
|
|
:current="tabIndex"
|
|
@change="onSwiperChange"
|
|
>
|
|
<block
|
|
v-for="(val,i) in topNavList"
|
|
:key="i"
|
|
>
|
|
<swiper-item class="swiper_item_css">
|
|
<slot name="{{i}}"></slot>
|
|
</swiper-item>
|
|
</block>
|
|
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"swiper-tabs",
|
|
data() {
|
|
return {};
|
|
},
|
|
props:{
|
|
height:{
|
|
type:Number,
|
|
default:120,
|
|
},
|
|
tabIndex:{ //当前导航栏索引
|
|
type:Number,
|
|
default:3,
|
|
},
|
|
topNavList:{ //顶部tabs数据
|
|
type:Array,
|
|
default:[]
|
|
},
|
|
},
|
|
methods:{
|
|
// 点击顶部tabs切换
|
|
onTopTabs(index){
|
|
this.$emit('onTopTabs',index)
|
|
},
|
|
onSwiperChange(e){
|
|
const idx = e.target.current;
|
|
this.$emit('onSwiperChange',idx)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.warp{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F3F4F6;
|
|
|
|
.top_list{
|
|
width: 100%;
|
|
position: sticky;
|
|
top: 0;
|
|
border-bottom: 10rpx solid #F3F4F6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.top_tab{
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background-color: white;
|
|
display: flex;
|
|
flex-direction:row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.tab_list{
|
|
width: 25%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction:column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
.tab_item{
|
|
height:100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.active{
|
|
border-bottom:6rpx solid #3476fe ;
|
|
color: #3476fe;
|
|
font-size: 29rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.swiper{
|
|
width: 100%;
|
|
// border: 1rpx solid red;
|
|
background-color: #EFEFEFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.swiper_css{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
// border: 1px solid red;
|
|
.swiper_item_css{
|
|
width: 100%;
|
|
height: 100%;
|
|
// border: 1rpx solid red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|