自定义tabbar处理底部安全区域

xiangpei

2025-06-27 fe9f04a789d5108bb038343798bce9874a37c268

自定义tabbar处理底部安全区域

 pages/tabbar/cart/cartList.vue

@@ -6,7 +6,7 @@
      </div>
    </u-navbar> 
    <!-- 空白页-->
    <view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty">
    <view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty"  :style="{height: windowHeight - marginBottom - 50 + 'px'}">
      <image src="/static/emptyCart.png" mode="aspectFit"></image>
      <view class="empty-tips">
        空空如也
@@ -14,7 +14,7 @@
      </view>
    </view>
    <!-- 店铺商品信息 -->
    <div class="content">
    <div class="content" :style="{height: windowHeight - marginBottom - 50 + 'px'}">
      <div class="box box2" :class="{ invalid: isInvalid(item) }" v-for="(item, index) in cartDetail.cartList"
        :key="index">
        <view class="tab">
@@ -126,7 +126,7 @@
    <u-modal v-model="deleteShow" :confirm-style="{'color':lightColor}" @confirm="deleteConfirm" show-cancel-button
      :content="deleteContent" :async-close="true"></u-modal>
    <!-- 结账 -->
    <div class="box box6">
    <div class="box box6" :style="{bottom: marginBottom + 50 + 'px'}">
      <view class="navL">
        <u-checkbox shape="circle" :active-color="lightColor" v-model="checkout" @change="checkOut()" label-size="24">全选
        </u-checkbox>
@@ -219,10 +219,14 @@
      isEdit: false, // 是否是编辑
      checkout: false, //全选按钮
      WEIXIN_num: "", //购物车兼容微信步进器
      marginBottom: 0 ,// 底部安全区域
      windowHeight: 0 // 可使用屏幕高度
    };
  },

  mounted() {
      this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
      this.windowHeight = uni.getSystemInfoSync().windowHeight
    // #ifdef MP-WEIXIN
    // 小程序默认分享
    uni.showShareMenu({ withShareTicket: true });

 pages/tabbar/user/utils/tool.vue

@@ -52,11 +52,6 @@
                        <view>我的活动</view>
                    </view>

                    <view class="interact-item" @click="navigateTo('/pages/mine/activity/reportActivity')">
                        <image src="/static/mine/shensu.png" mode=""></image>
                        <view>活动</view>
                    </view>

                    <view class="interact-item" @click="navigateTo('/pages/mine/myCollect/myCollect')">
                        <image src="/static/mine/shensu.png" mode=""></image>
                        <view>我的收藏</view>
@@ -88,10 +83,10 @@



                    <view class="interact-item" @click="navigateTo('/pages/mine/signIn')">
<!--                     <view class="interact-item" @click="navigateTo('/pages/mine/signIn')">
                        <image src="/static/mine/sign.png" mode=""></image>
                        <view>每日签到</view>
                    </view>
                    </view> -->

                    <view class="interact-item" @click="navigateTo('/pages/cart/coupon/couponCenter')">
                        <image src="/static/mine/couponcenter.png" mode=""></image>
@@ -100,10 +95,10 @@



                    <view class="interact-item" @click="navigateTo('/pages/promotion/bargain/log')">
<!--                     <view class="interact-item" @click="navigateTo('/pages/promotion/bargain/log')">
                        <image src="/static/mine/kanjia.png" mode=""></image>
                        <view>砍价记录</view>
                    </view>
                    </view> -->