uni-app 左右滑动切换 【可点击切换】

1.HTML部分

<template>
    <view class="collectWrapper">
        <view class="tabbar">
            <view :class="selectStatus == 0 ? 'selectStatus' : '' " @tap="changeTabs(0)">tabs1</view>
            <view :class="selectStatus == 1 ? 'selectStatus' : '' " @tap="changeTabs(1)">tabs2</view>
            <view :class="selectStatus == 2 ? 'selectStatus' : '' " @tap="changeTabs(2)">tabs2</view>
        </view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :duration="duration" @change="swiperChange" :current="currentVal">
                        <swiper-item><view class="swiper-item">内容区域一</view></swiper-item>
                        <swiper-item><view class="swiper-item">内容区域二</view></swiper-item>
                        <swiper-item><view class="swiper-item">内容区域三</view></swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
    </view>
</template>

2.脚本部分

<script>
export default {
    data() {
        return {
            background: ['color1', 'color2', 'color3'],
            duration: 500,
            // 控制swiper的显示
            currentVal: 0,
            // 顶部tabs显示状态
            selectStatus: 0,
        }
    },
    methods: {
		// 点击顶部tabs触发该函数
        changeTabs(i) {
            this.currentVal = i;
            this.selectStatus = i;
        },
        // swiper切换此函数被监听
        swiperChange(e) {
            this.selectStatus = e.detail.current;
        },
    }
}
</script>

3.样式部分

<style lang="scss">
page {
	width: 100%;
	height: 100%;
}
.selectStatus {
	color: rgba(19, 149, 244, 1);
	border-bottom: 4rpx solid rgba(19, 149, 244, 1);
}
.collectWrapper {
    // 确保swiper 内容填满设备，若需自适应只需取消掉100%即可
	width: 100%;
	height: 100%;
	.tabbar {
        width: 100%;
        height: 70rpx;
	}
	.uni-padding-wrap {
        height: 100%;
        .page-section-spacing {
            height: 100%;
        }
        .swiper {
            height: 100%;
        }
	}
}
</style>