uni-app使用scrollview+swiper实现滑动切换页面功能

效果图：

一、创建自定义组件 scrollbar.vue

<template>
    <view class="uni-tab-bar">
        <scroll-view class="uni-swiper-tab" scroll-x="true">
            <block v-for="(tab,index) in tabBars" :style="scrollStyle">
                <view class="swiper-tab-list" :class="{'active' : tabIndex==index}" @tap="tabtap(index)"
                    :style="scrollItemStyle">
                    { {tab.name}} { {tab.num?tab.num:""}}
                    <view class="swiper-tab-line"></view>
                </view>
            </block>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        props: {
            tabBars: Array,
            tabIndex: Number,
            scrollStyle: {
                type: String,
                default: ""
            },
            scrollItemStyle: {
                type: String,
                default: ""
            }
        },
        methods: {