自定义tabbar，支持动画效果，凸起，角标，增加仿照微信下拉选项

更新记录

1.1.0（2022-12-30）

1.兼容ios底部安全区 2.增加角标 3.仿照微信右上角实现下拉选项

1.0.0（2022-12-23）

首次更新

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.3.3 app-vue app-nvue	√	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

复制下方的示例即可直接快速使用，然后再根据业务需求进行调整即可。

隐藏原生系统导航栏：在App.vue文件

<script>
    export default {
        onLaunch: function() {
            uni.hideTabBar()
            console.log('App Launch')
        },
        onShow: function() { },
        onHide: function() { }
    }
</script>

组件：

<template>
    <view class="tabbar_pages">
        <view class="uni-tabbar">
            <view class="tababr_item tabbar_find" v-for="(item,index) in tabbarList" :key="index"
                @click="tabbarSave(item,index)">
                <view class="tabbar_icon" v-if="item.type == 0">
                    <image :src="item.icon_select" class="select_img" mode="" v-if="item.pagePath == pagePath"></image>
                    <image :src="item.icon" mode="" v-else></image>
                </view>
                <view class="find_icon" v-if="item.type == 1">
                    <view class="icon">
                        <image :src="item.icon_select" class="select_img" mode="" v-if="item.pagePath == pagePath">
                        </image>
                        <image :src="item.icon" mode="" v-else></image>
                    </view>
                </view>
                <view class="tababr_text" :class="item.pagePath == pagePath?'textActive':''">{{item.text}}</view>
                <view class="tag" v-if="isShowNums && item.nums > 0">{{item.nums}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: { 
            isShowNums: {
                default: true,
                type: Boolean
            },
            pagePath:{
                default:'',
                type:String
            }
        },
        data() {
            return {
                page: '',
                isRouterShow: true,
                tabbarList: [{
                        "pagePath": "pages/index/index",
                        "text": "首页",
                        "icon_select": "../../static/tabbar/select_home.png",
                        "icon": "../../static/tabbar/home.png",
                        "type": 0,
                        "nums": 0
                    },
                    {
                        "pagePath": "pages/commu/index",
                        "text": "社区",
                        "icon_select": "../../static/tabbar/select_sq.png",
                        "icon": "../../static/tabbar/sq.png",
                        "type": 0,
                        "nums": 0
                    },
                    {
                        "pagePath": "pages/find/index",
                        "text": "发现",
                        "icon_select": "../../static/tabbar/select_find.png",
                        "icon": "../../static/tabbar/find.png",
                        "type": 1,
                        "nums": 0
                    },
                    {
                        "pagePath": "pages/news/index",
                        "text": "消息",
                        "icon_select": "../../static/tabbar/select_news.png",
                        "icon": "../../static/tabbar/news.png",
                        "type": 0,
                        "nums": 9
                    },
                    {
                        "pagePath": "pages/my/index",
                        "text": "我的",
                        "icon_select": "../../static/tabbar/select_my.png",
                        "icon": "../../static/tabbar/my.png",
                        "type": 0,
                        "nums": 0
                    }
                ]
            };
        },
        created() { 
            //您的判断逻辑isRouterShow
            if (this.isRouterShow == false) { 
                this.tabbarList.splice(2,1)
                uni.setTabBarItem({
                    index: 1, // tabBar 的哪一项，从左边算起
                    visible: false // 该项是否显示
                })
            }
        },
        methods: {
            tabbarSave(e, index) {
                this.page = e.pagePath
                uni.switchTab({
                    url: '/' + e.pagePath
                });
            },
        }
    }
</script>

<style lang="scss">
    .uni-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 100upx;
        height: calc(100upx + env(safe-area-inset-bottom)) !important;
        padding-bottom: calc(env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);

        .tabbar_find {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .find_icon {
                width: 60px;
                height: 55px;
                margin-top: -30px;
                background-color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0px 0px -17rpx 1rpx rgba(206, 206, 206, 0.32);

                .icon {
                    background-color: #3668FC;
                    width: 42px;
                    height: 42px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    image {
                        width: 28px;
                        height: 28px;
                    }

                    .select_img {
                        animation: tabbar-item-button-click 0.2s forwards 1 !important;
                    }
                }
            }
        }

        .tababr_item {
            font-size: 20rpx;
            text-align: center;
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;

            .tag {
                position: absolute;
                right: 20px;
                top: 5px;
                padding: 4rpx;
                width: 12px;
                height: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: red;
                font-size: 24rpx;
                border-radius: 50%;
                color: #fff;
            }

            .tabbar_icon {
                height: 25px;
                width: 25px;

                .select_img {
                    animation: tabbar-item-button-click 0.2s forwards 1;
                }

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .tababr_text {
                line-height: 24rpx;
                font-size: 24rpx;
                margin-top: 2px;
                color: #999;
            }
            .textActive{
                color: #3668FC;
            }
        }
    }

    /* 点击动画 start */

    @keyframes tabbar-item-button-click {
        from {
            transform: scale(0.5);
        }

        to {
            transform: scale(1);
        }
    }
</style>

在页面使用

<template>
    <view>
        <view class="content" @click="hideDrawer">
            <tabbar :pagePath="'pages/index/index'"></tabbar>
            <zl-down :isDownShow="isDownShow" @choseBtn="choseBtn"></zl-down>
        </view>

    </view>
</template>

<script>
    import zlDown from '../../components/zlDown/zlDown.vue'
    export default {
        components: {
            zlDown
        },
        data() {
            return {
                title: '我是首页',
                isDownShow: false,
            }
        },
        onLoad() {
            uni.hideTabBar();
        },
        methods: {
            onNavigationBarButtonTap() {
                this.isDownShow = !this.isDownShow
            },
            hideDrawer() { 
                if (this.isDownShow == true)
                    this.isDownShow = false
            },
            choseBtn(val) {
                this.isDownShow = true
                uni.showToast({
                    title:val.name
                })
            }
        }
    }
</script>

<style lang="scss">
    .content {
        height: 100vh;
    }
</style>

仿微信右上角下拉选项组件

<template>
    <view class="down_pages" v-show="isDownShow">
        <view class="classScreen">
            <view class="screePage" v-for="(item,index) in list" :key="index" @click="choseBtn(item)">
                <view class="screImg">
                    <image :src="item.imgUrl" mode=""></image>
                </view>
                <view class="screeName">
                    {{item.name}}
                </view>
            </view>
        </view>
        <view class="tap"></view>
    </view>
</template>
<script>
    export default {
        props: {
            isDownShow: {
                default: false,
                type: Boolean
            },
        },
        data() {
            return {
                list: [{
                        id: 0,
                        name: '发起群聊',
                        imgUrl: '../../static/img/chat.png'
                    },
                    {
                        id: 1,
                        name: '添加朋友',
                        imgUrl: '../../static/img/add.png'
                    },
                    {
                        id: 2,
                        name: '扫一扫',
                        imgUrl: '../../static/img/scan.png'
                    },
                    {
                        id: 3,
                        name: '收付款',
                        imgUrl: '../../static/img/pay.png'
                    }
                ]
            };
        },
        methods: {
            choseBtn(data) {
                this.$emit('choseBtn', data)
            }
        }
    }
</script>

<style lang="scss">
    .down_pages {
        position: absolute;
        right: 10px;
        z-index: 999;

        .classScreen {
            width: 125px;
            height: 184px;
            background-color: #4C4C4C;
            color: #fff;
            text-align: center;
            border-radius: 8rpx;
            line-height: 30px;
            z-index: 99;
            overflow: hidden;
            box-sizing: border-box;

            .screePage {
                height: 35px;
                border-bottom: 1px solid #5b5b5b;
                display: flex;
                align-items: center;
                padding: 5px;

                .screImg {
                    width: 28px;
                    height: 28px;
                    padding-left: 2px;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .screeName {
                    margin-left: 10px;
                    font-size: 32rpx;
                }
            }
        }
    }

    .down_pages::before {
        content: '';
        display: block;
        position: absolute;
        top: -15rpx;
        right: 8rpx;
        width: 0;
        height: 0;
        border-left: 30rpx solid transparent;
        border-right: 30rpx solid transparent;
        border-bottom: 30rpx solid #4C4C4C;
    }
</style>

页面使用：同上

自定义tabbar，支持动画效果，凸起，角标，增加仿照微信下拉选项自定义，tabbar

更新记录

1.1.0（2022-12-30）

1.0.0（2022-12-23）

平台兼容性

隐私、权限声明

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

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

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

许可协议

MIT协议

自定义tabbar，支持动画效果，凸起，角标，增加仿照微信下拉选项

uniapp+vue3+tyscript 实现佳博打印机功能

zl-update app更新，支持热更新，整包更新，可遮盖底部tabbar，

全局mask蒙层，自定义tabbar

自定义tabbar，支持动画效果，凸起，角标，增加仿照微信下拉选项 自定义，tabbar

更新记录

1.1.0（2022-12-30）

1.0.0（2022-12-23）

平台兼容性

隐私、权限声明

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

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

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

许可协议

MIT协议

自定义tabbar，支持动画效果，凸起，角标，增加仿照微信下拉选项

uniapp+vue3+tyscript 实现佳博打印机功能

zl-update app更新，支持热更新，整包更新，可遮盖底部tabbar，

全局mask蒙层，自定义tabbar

Modal title

自定义tabbar，支持动画效果，凸起，角标，增加仿照微信下拉选项自定义，tabbar