IOS底部遮挡tabbar

优雅草蜻蜓Q系统苹果IOS底部遮挡tabbar问题解决-参考此方式其他uniapp开发的底部菜单栏均可采用

这是底部代码

<template>    <view class="nav">        <template v-if="path === home">            <view class="nav-item">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_2_selected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">精选</text>            </view>            <view class="nav-item" @tap="_jumpPage(latestVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_film_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">最新</text>            </view>            <view class="nav-item" @tap="_jumpPage(longVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">长视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(shortVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_game_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">短视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(community)">                <image class="nav-item__icon" src="/static/images/tabbar/common_home_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">社区</text>            </view>            <view class="nav-item" @tap="_jumpPage(my)">                <image class="nav-item__icon" src="/static/images/tabbar/common_mine_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">我的</text>            </view>        </template>        <template v-else>            <view class="nav-item" @tap="_jumpPage(home)">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_2_normal.png" mode="aspectFit"></image>                <text class="nav-item__text">精选</text>            </view>            <view class="nav-item" @tap="_jumpPage(latestVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_film_selected.png" mode="aspectFit" v-if="path === latestVideo"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_film_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === latestVideo}">最新</text>            </view>            <view class="nav-item" @tap="_jumpPage(longVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_selected.png" mode="aspectFit" v-if="path === longVideo"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === longVideo}">长视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(shortVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_game_selected.png" mode="aspectFit" v-if="path === shortVideo"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_game_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === shortVideo}">短视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(community)">                <image class="nav-item__icon" src="/static/images/tabbar/common_home_selected.png" mode="aspectFit" v-if="path === community"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_home_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === community}">社区</text>            </view>            <view class="nav-item" @tap="_jumpPage(my)">                <image class="nav-item__icon" src="/static/images/tabbar/common_mine_selected.png" mode="aspectFit" v-if="path === my"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_mine_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === my}">我的</text>            </view>        </template>    </view></template>

样式代码：

    .text-white {        color: #FFFFFF;    }    .active {        color: #fc80a2;    }    .nav-item__icon--white {        color: #FFFFFF;        font-size: 24rpx;        margin-top: 5rpx;    }    .nav-item__icon {        width: 40rpx;        height: 40rpx;    }    .nav-item__text {        color: #333333;        font-size: 24rpx;        margin-top: 5rpx;    }    .nav-item {        /* #ifndef APP-NVUE */        display: flex;        flex-direction: column;        /* #endif */        height: 50px;        flex: 1;        align-items: center;        justify-content: center;    }    .nav {        /* #ifndef APP-NVUE */        display: flex;        border-top: 1rpx solid rgba($color: #909090, $alpha: 0.2);        /* #endif */        height: 50px;        flex-direction: row;        align-items: center;        /* #ifdef APP-NVUE */        border-top-color: rgba($color: #909090, $alpha: 0.2);        border-top-width: 1rpx;        /* #endif */    }

需要对其设置安全距离，此为安全距离代码

   padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */      padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

因此我们建立

.safepadding{        padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */        padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */    }

加入在nav这个标签上
加入后：

<template>    <view class="nav safepadding">        <template v-if="path === home">            <view class="nav-item">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_2_selected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">精选</text>            </view>            <view class="nav-item" @tap="_jumpPage(latestVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_film_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">最新</text>            </view>            <view class="nav-item" @tap="_jumpPage(longVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">长视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(shortVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_game_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">短视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(community)">                <image class="nav-item__icon" src="/static/images/tabbar/common_home_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">社区</text>            </view>            <view class="nav-item" @tap="_jumpPage(my)">                <image class="nav-item__icon" src="/static/images/tabbar/common_mine_unselected.png" mode="aspectFit"></image>                <text class="nav-item__icon--white">我的</text>            </view>        </template>        <template v-else>            <view class="nav-item" @tap="_jumpPage(home)">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_2_normal.png" mode="aspectFit"></image>                <text class="nav-item__text">精选</text>            </view>            <view class="nav-item" @tap="_jumpPage(latestVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_film_selected.png" mode="aspectFit" v-if="path === latestVideo"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_film_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === latestVideo}">最新</text>            </view>            <view class="nav-item" @tap="_jumpPage(longVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_selected.png" mode="aspectFit" v-if="path === longVideo"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_short_video_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === longVideo}">长视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(shortVideo)">                <image class="nav-item__icon" src="/static/images/tabbar/common_game_selected.png" mode="aspectFit" v-if="path === shortVideo"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_game_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === shortVideo}">短视频</text>            </view>            <view class="nav-item" @tap="_jumpPage(community)">                <image class="nav-item__icon" src="/static/images/tabbar/common_home_selected.png" mode="aspectFit" v-if="path === community"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_home_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === community}">社区</text>            </view>            <view class="nav-item" @tap="_jumpPage(my)">                <image class="nav-item__icon" src="/static/images/tabbar/common_mine_selected.png" mode="aspectFit" v-if="path === my"></image>                <image class="nav-item__icon" src="/static/images/tabbar/common_mine_normal.png" mode="aspectFit" v-else></image>                <text class="nav-item__text" :class="{'active': path === my}">我的</text>            </view>        </template>    </view></template>