uniapp自己写的Tabs标签页

<template>
    <view class="content">
        <view class="" style="display: flex;justify-content: space-around;">
            <view :class="[active==0?'activePaixu':'paixu']" @click="paixu0">
                综合排序
            </view>
            <view :class="[active==1?'activePaixu':'paixu']" @click="paixu1">
                销量排序
            </view>
            <view :class="[active==2?'activePaixu':'paixu']" @click="paixu2">
                好评排序
            </view>
        </view>
        <view class="">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration" :current=active>
                <swiper-item>
                    <view class="swiper-item">
                        1
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item">
                        2
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item">
                        3
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                active: 0,
                indicatorDots: false,
                autoplay: false,
                interval: 2000,
                duration: 500
            }
        },
        onLoad() {

        },
        methods: {

        // 滑动swiper-item tabbar转到相应的对应项
            itemChange(e){
                // alert(e.detail.current)
                this.active=e.detail.current
            },
            scroll: function(e) {
                console.log(e)
                this.old.scrollTop = e.detail.scrollTop
            },
            paixu0() {
                this.active = 0
            },
            paixu1() {
                this.active = 1
            },
            paixu2() {
                this.active = 2
            },
        }
    }
</script>

<style>
    .swiper-item {
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }
    .swiper {
        height: 300rpx;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .paixu {
        padding: 20rpx;
    }

    .activePaixu {
        padding: 20rpx;
        font-weight: bolder;
    }
</style>
<style>
    .uni-margin-wrap {
        width: 690rpx;
        width: 100%;
    }

    .swiper {
        height: 300rpx;
        width: 670rpx;
        border: royalblue 2px solid;
    }

    .swiper-item {
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }

    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }

    .uni-common-mt {
        margin-top: 60rpx;
        position: relative;
    }

    .info {
        position: absolute;
        right: 20rpx;
    }

    .uni-padding-wrap {
        width: 550rpx;
        padding: 0 100rpx;
    }
</style>