更新记录

1.0.1（2021-02-05） 下载此版本

1

1.0.0（2021-02-04） 下载此版本

只兼容了微信小程序，其它平台未测试 1.可通过滑动页面切换，带过渡动画； 2.通过点击tab栏可直接切换至该tab页，无需经过中间的tab页（参照微信）。

平台兼容性

tabbar使用说明

<template>
    <view>
        <tab-page :tabs="tabs" :pageData="lists" @tabSwitch="tabSwitch">
            <template #page="{i, pageData}">
                <view v-if="i==2">{{pageData[1][1]}}</view>
                <view v-if="i==0">
                    <view v-for="item in pageData[0]" :key="item">{{item}}</view>
                </view>
                <view v-if="i==1">
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                    <view>1</view>
                </view>
            </template>
        </tab-page>
    </view>
</template>

<script>
    import tabPage from '../../components/tab-page/tab-page.vue'
    export default {
        data() {
            return {
                tabs: ['标签页0', '标签页1', '标签页2'],
                lists: [
                    ['AAA', 'BBBB'],
                    ['CCC', 'DD']
                ]
            }
        },
        mounted() {
            setTimeout(()=>{

            },1000)
        },
        methods: {
            tabSwitch(i){
                console.log('可以在这里加载、刷新标签页', i)
                if(i==1){
                    //注意：以下是tab页加载数据的方式
                    this.lists.splice(1, 1, ['GGGG'])
                }
            }
        },
        components:{
            tabPage
        }
    }
</script>

传参说明

事件说明