2***@qq.com
2***@qq.com
  • 发布:2022-11-10 18:30
  • 更新:2022-11-10 18:30
  • 阅读:228

vue页面跳转nvue页面自定义的tabbar会隐藏

分类:uni-app

自定义的tabbar页面代码

<template>  
    <view>  
        <view class="border_box">  
            <!-- <view class="tabBar_miden_border"></view> -->  
        </view>  
        <view class="tabbar">  
            <block v-for="(item, index) in tabBar.list">  
                <view class="tabbar-item" :class="item.pagePath==('/'+nowPath)?'tabBar_item2':''"  
                    :style="{color:item.pagePath==('/'+nowPath)?tabBar.selectedColor:tabBar.color}"  
                    @click="clickTab(item)">  
                    <view :class="item.pagePath==('/'+nowPath)?'tabBar_miden_border':''">  
                        <view class="tabbar-icon-bg"  
                            :style="{'background-color':item.pagePath==('/'+nowPath)?tabBar.selectedbgColor:tabBar.bgcolor}">  
                            <image class="tabbar-icon"  
                                :src="item.pagePath==('/'+nowPath)? item.selectedIconPath : item.iconPath"></image>  
                        </view>  
                        <text class="tabbar-text" v-if="item.pagePath==('/'+nowPath)">{{ item.text }}</text>  
                    </view>  
                </view>  
            </block>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        name: 'tabBar',  
        data() {  
            return {  
                paddingBottomHeight: 0, //苹果X以上手机底部适配高度  
                tabBar: {  
                    color: '#C1C0C9',  
                    selectedColor: '#05B53A',  
                    bgcolor: 'transparent',  
                    selectedbgColor: '#07C540',  
                    list: [{  
                            pagePath: "/pages/Index/index",  
                            showBig: false,  
                            iconPath: '../../static/image/tabBar/bar1.png',  
                            selectedIconPath: '../../static/image/tabBar/bar1_active.png',  
                            text: '体育',  
                        },  
                        {  
                            pagePath: "/pages/Coupon/index",  
                            showBig: false,  
                            iconPath: '../../static/image/tabBar/bar2.png',  
                            selectedIconPath: '../../static/image/tabBar/bar2_active.png',  
                            text: '活动',  
                        },  
                        {  
                            pagePath: '/pages/Recreation/index',  
                            showBig: false,  
                            iconPath: '../../static/image/tabBar/bar3.png',  
                            selectedIconPath: '../../static/image/tabBar/bar3_active.png',  
                            text: '娱乐城',  
                        },  
                        {  
                            pagePath: "/pages/TreasureChest/index",  
                            showBig: false,  
                            iconPath: '../../static/image/tabBar/bar4.png',  
                            selectedIconPath: '../../static/image/tabBar/bar4_active.png',  
                            text: '代理',  
                        },  
                        {  
                            pagePath: "/pages/Me/index",  
                            showBig: false,  
                            iconPath: '../../static/image/tabBar/bar5.png',  
                            selectedIconPath: '../../static/image/tabBar/bar5_active.png',  
                            text: '我的',  
                        }  
                    ]  
                }  
            }  
        },  
        created() {  
            let that = this;  
            uni.getSystemInfo({  
                success: function(res) {  
                    let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];  
                    model.forEach(item => {  
                        //适配iphoneX以上的底部,给tabbar一定高度的padding-bottom  
                        if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {  
                            that.paddingBottomHeight = 40;  
                        }  
                    })  
                }  
            });  
        },  
        onReady() {  
            try {  
                uni.hideTabBar({  
                    animation: false  
                })  
            } catch (e) {  
                //TODO handle the exception  
            }  
        },  
        mounted() {  
            try {  
                uni.hideTabBar({  
                    animation: false  
                })  
            } catch (e) {  
                //TODO handle the exception  
            }  
        },  
        computed: {  
            nowPath() {  
                return getCurrentPages()[0] && getCurrentPages()[0].route;  
            },  
        },  
        methods: {  
            clickTab(item) {  
                uni.switchTab({  
                    url: item.pagePath  
                })  
            }  
        }  
    }  
</script>
2022-11-10 18:30 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复