更新记录

1.0.1(2021-02-05) 下载此版本

1

1.0.0(2021-02-04) 下载此版本

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


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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>

传参说明

参数 类型 说明
:tabs Array 每个tab的标题
:pageData Array 所有tab页的数据

事件说明

事件 说明
@tabSwitch 切换tab页后的回调,参数为tab页的下标,可在此刷新、加载tab页

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

无广告,开源可修改

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问