72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<view class="tab-container">
|
|
<view class="uni-margin-wrap">
|
|
<swiper
|
|
class="swiper"
|
|
:current="current"
|
|
:circular="false"
|
|
:indicator-dots="false"
|
|
:autoplay="false"
|
|
:duration="500"
|
|
>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab0"></slot>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab1"></slot>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab2"></slot>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab3"></slot>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab4"></slot>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab5"></slot>
|
|
</swiper-item>
|
|
<swiper-item @touchmove.stop="false">
|
|
<slot name="tab6"></slot>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'tab',
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
current: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.tab-container
|
|
width: 100%
|
|
height: 100%
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
flex-direction: row
|
|
.uni-margin-wrap
|
|
width: 100%
|
|
height: 100%
|
|
.swiper
|
|
width: 100%
|
|
height: 100%
|
|
.swiper-item
|
|
display: block;
|
|
width: 100%
|
|
height: 100%
|
|
</style>
|