uni-app 自定义底部凸起导航栏

最新推荐文章于 2024-09-26 11:51:52 发布

m0_61073617

最新推荐文章于 2024-09-26 11:51:52 发布

阅读量1.3k

点赞数 1

分类专栏： uni-app 文章标签：微信小程序 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61073617/article/details/129092714

版权

uni-app 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

此代码示例展示了如何在微信小程序中创建一个自定义的tabBar，支持显示图片和iconfont图标，并进行权限判断。通过v-for遍历导航列表，动态展示每个tab项，同时处理点击事件，如页面跳转和悬浮按钮的功能。

摘要由CSDN通过智能技术生成

先上图

tabBar支持图片、iconfont图标展示

权限判断展示

<template>
    <view>
        <view class="footer_box" :class="{ footer_bg: bg }">
            <view v-for="(item, index) of navigationList" :key="index" class="footer_item" v-if="item.isShow">
                <view v-if="item.raised" class="footer_raised_item" @click="onRaised">
                    <text class="iconfont icon-saoma" style="font-size: 90rpx;color: #999999;"></text>
                </view>
                <view v-else class="footer_nav_item" @click="onPageJump(item.pagePath)">
                    <block v-if="item.isShow && item.selectedIconPath">
                        <image v-if="item.pagePath == path" class="footer_nav_item_image" :src="item.selectedIconPath" mode="aspectFit"></image>
                        <image v-else class="footer_nav_item_image" :src="item.iconPath" mode="aspectFit"></image>
                        <text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
                    </block>
                    <block v-else-if="item.isShow">
                        <text class="iconfont" :class="item.iconPath" :style="{'font-size': '45rpx','color': item.pagePath == path ? '#69C910':'#999999'}"></text>
                        <text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
                    </block>
                </view>
            </view>
        </view>
        <view v-if="place" class="footer_station"></view>
        <view class="lan-mask" v-if="popupShow" :style="'height: '+(phoneHeight - 100)+'rpx;'">
            <view class="m-middle">
                <view class="m-middle-btn">扫描二维码</view>
                <view class="m-middle-btn">输入车编号</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        bg: {
            type: Boolean,
            default: true
        },
        place: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            path: '',
            phoneHeight: 0,
            navigationList: [
                {
                    pagePath: '/pages/equipment/manage/lanixong/visualization',
                    iconPath: 'icon-ditu',
                    isShow: true,
                    text: '可视化'
                },
                {
                    pagePath: '/pages/equipment/equipment',
                    iconPath: '/static/icon/8d673f684b61101e7bb7342e3714078.png',
                    selectedIconPath: '/static/icon/7314de4958d492a476b05fa0b2cb6b0.png',
                    isShow: true,
                    text: '设备'
                },
                {
                    iconPath: 'icon-saoma',
                    text: '扫一扫',
                    isShow: true,
                    raised: true
                },
                {
                    pagePath: '/pages/equipment/manage/lanixong/manage',
                    iconPath: 'icon-weixiu',
                    isShow: true,
                    text: '运维'
                },
                {
                    pagePath: '/pages/user/user',
                    iconPath: '/static/icon/d57d3d716d393498c227ff1d2f00abc.png',
                    selectedIconPath: '/static/icon/ebfc732cdcdc515f2f26d44f263318c.png',
                    isShow: true,
                    text: '我的'
                }
            ],
            popupShow: false,
            lookEquipment: false
        };
    },
    //第一次加载
    created() {
        //查询权限
        this.lookEquipment = uni.getStorageSync('lookEquipment')
        //如果没有设备权限，那么可视化、运维不显示
        if(!this.lookEquipment) {
            this.navigationList.forEach((v) => {
                if(v.text == '可视化' || v.text == '运维') {
                    v.isShow = false
                }
            })
        }
        // 获取页面指针数组
        let currentPages = getCurrentPages(); 
        // 获取当前页
        let page = currentPages[currentPages.length - 1]; 
        // 当前页的路径
        this.path = '/' + page.route; 
        uni.getSystemInfo({ 
                success:(res)=> {
                this.phoneHeight = (res.screenHeight * (750 / res.windowWidth)) //窗口高度，将px 转换rpx
            }            
        })
    },
    //方法
    methods: {
        onPageJump(url) {
            if (this.path !== url) {
                uni.reLaunch({
                    url
                });
            }
        },
        onRaised(){
            this.popupShow = !this.popupShow;
        }
    }
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
    @keyframes fade-in {
        0% {
            transform: scale(0);
        }

        50% {
            transform: scale(1.3);
        }

        100% {
            transform: scale(1);
        }
    }
    .lan-mask {
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(255,255,255, 0.7);

        .m-middle {
            border: 1px solid #999;
            background: rgba(245,247,250, 0.9);
            animation: fade-in 0.3s;
            z-index: 10001111;
            border-radius: 27upx;
            padding: 35upx;

            .m-middle-btn {
                width: 400upx;
                height: 86upx;
                background: #68C90F;
                border-radius: 18upx;
                font-size: 32upx;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 86upx;
                text-align: center;
                margin: 0 auto;
            }
            
            .m-middle-btn:last-child {
                margin-top: 35upx;
            }
            
        }
    }

.footer_station {
    height: 100rpx;
    box-sizing: content-box;
    // box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom); 
}
.footer_box {
    height: 100rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    z-index: 502;
    box-sizing: content-box;
    // box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom); 
}
.footer_bg {
    background-color: #FFF;
}
.footer_item {
    position: relative;
    flex: 1;
}
.footer_nav_item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.footer_nav_item:active {
    background-color: rgba($color: #fff, $alpha: 0.1);
}
.footer_nav_item_text {
    font-size: 24rpx;
    color: #999999;
    margin-top: 6rpx;
}
.footer_nav_item_text_active {
    color: #f9a633;
}
.footer_item_text_active {
    color: #69C910;
}
.footer_nav_item_image {
    width: 50rpx;
    height: 50rpx;
}
.footer_raised_item {
    position: absolute;
    top: -40rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 120rpx;
    height: 120rpx;
    background-color: #FFF;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
}
.footer_raised_item_image {
    width: 70rpx;
    height: 70rpx;
}
.popup_content {
    background-color: #FFF;
    padding: 30rpx;
}
</style>