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

xiangpei

2025-06-27 cf7077ed40e7e9a41e490128fc386936ad090ce8

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

 components/custom-tabbar.vue

@@ -1,17 +1,11 @@
<!-- components/custom-tabbar.vue -->
<template>
  <view class="custom-tabbar" :style="{backgroundColor: bgColor}">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      class="tabbar-item"
      @click="switchTab(item)"
    >
      <image 
        :src="selected === item.key ? item.selectedIconPath : item.iconPath" 
        :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}"
      />
      <text class="tabbar-text" v-if="item.text" :style="{color: selected === item.key ? selectedTextColor : color}">
    <view class="custom-tabbar" :style="{backgroundColor: bgColor, marginBottom: marginBottom + 'px'}">
        <view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(item)">
            <image :src="selected === item.key ? item.selectedIconPath : item.iconPath"
                :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" />
            <text class="tabbar-text" v-if="item.text"
                :style="{color: selected === item.key ? selectedTextColor : color}">
        {{item.text}}
      </text>
    </view>
@@ -38,8 +32,8 @@
  data() {
    return {
      color: '#999999',
      list: [
            {
                marginBottom: 0,
                list: [{
                "pagePath": "/pages/tabbar/index/home",
                "iconPath": "/static/tabbar/home.png",
                "selectedIconPath": "/static/tabbar/home-s.png",
@@ -78,6 +72,10 @@
      ]
    }
  },
        created() {
            console.log("底部安全区域", uni.getSystemInfoSync().safeAreaInsets);
            this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
        },
  methods: {
    switchTab(item) {
        console.log("执行力", item);
@@ -110,10 +108,12 @@
  align-items: center;
  justify-content: center;
}

.video-add {
  width: 30px !important;
  height: 30px !important;
}

.tabbar-icon {
  width: 24px;
  height: 24px;

 pages/health/healthVideo.vue

@@ -53,6 +53,7 @@
                @touchstart.stop="handleTouchStart"
                @touchmove.stop="handleTouchMove"
                @touchend.stop="handleTouchEnd"
                :style="{bottom: marginBottom + 'px'}"
                class="container">
                <!-- 进度条 - 整个区域可拖动 -->
                <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
@@ -118,7 +119,7 @@


        <!-- 视频信息层 -->
        <view class="video-info">
        <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
          <view>
              <text class="video-author">@{{item.authorName}}</text>
          </view>
@@ -325,7 +326,8 @@
            pageNumber: 1,
            pageSize: 10,
            videoFrom: 'recommend'
        }
        },
        marginBottom: 0 // 底部安全区域
    }
  },
  onShow() {
@@ -347,6 +349,7 @@
      this.startHidenTime = Date.now()
  },
  onLoad(option) {
      this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
      const token = storage.getAccessToken();
      if (! token) {
          this.wxSilentLogin(() => {

 pages/kitchen/KitchenVideo.vue

@@ -56,6 +56,7 @@
              @touchstart.stop="handleTouchStart"
              @touchmove.stop="handleTouchMove"
              @touchend.stop="handleTouchEnd"
              :style="{bottom: marginBottom + 'px'}"
              class="container">
            <!-- 进度条 - 整个区域可拖动 -->
            <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
@@ -121,7 +122,7 @@


        <!-- 视频信息层 -->
        <view class="video-info">
        <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
          <view>
            <text class="video-author">@{{item.authorName}}</text>
          </view>
@@ -349,7 +350,8 @@
        pageSize: 6,
        videoFrom: 'recommend',
        videoType: 'cook'
      }
      },
      marginBottom: 0 // 底部安全区域
    }
  },
  onShow() {
@@ -365,6 +367,7 @@
    this.startHidenTime = Date.now()
  },
  onLoad() {
    this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync();
      this.buttonHeight = systemInfo.statusBarHeight;
@@ -963,7 +966,6 @@
.video-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {

 pages/tabbar/index/home.vue

@@ -53,6 +53,7 @@
                @touchstart.stop="handleTouchStart"
                @touchmove.stop="handleTouchMove"
                @touchend.stop="handleTouchEnd"
                :style="{bottom: marginBottom + 'px'}"
                class="container">
                <!-- 进度条 - 整个区域可拖动 -->
                <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
@@ -118,7 +119,7 @@


        <!-- 视频信息层 -->
        <view class="video-info">
        <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}">
          <view>
              <text class="video-author">@{{item.authorName}}</text>
          </view>
@@ -326,7 +327,8 @@
            pageNumber: 1,
            pageSize: 10,
            videoFrom: 'recommend'
        }
        },
        marginBottom: 0 // 底部安全区域
    }
  },
  onShow() {
@@ -348,6 +350,7 @@
      this.startHidenTime = Date.now()
  },
  onLoad(option) {
      this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
      const token = storage.getAccessToken();
      if (! token) {
          this.wxSilentLogin(() => {

 pages/video/video-play.vue

@@ -18,7 +18,7 @@
        @touchmove="handleSwiperMove"
        @touchend="handleSwiperEnd(item)"
         >
          <view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
          <view :style="{width: '100%', height: windowHeight - marginBottom + 'px'}" v-if="item.videoContentType === 'video'">
                <!-- 播放按钮（仅当视频暂停时显示） -->
                <view 
                  class="play-icon" 
@@ -319,7 +319,9 @@
            pageSize: 10,
            authorId: '',
            videoFrom: ''
        }
        },
        marginBottom: 0, // 底部安全区域
        windowHeight: 0 // 可使用屏幕高度
    }
  },
  onShow() {
@@ -340,6 +342,8 @@
      
  },
  onLoad(option) {
      this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
      this.windowHeight = uni.getSystemInfoSync().windowHeight
      const playInfo = uni.getStorageSync("playInfo", playInfo);
      if(playInfo) {
          this.currentIndex = playInfo.playIndex;
@@ -951,7 +955,7 @@
    .video-info {
      width: 70%;
      position: absolute;
      bottom: 20px;
      bottom: 40px;
      left: 20px;
      color: #f8f8f8;
      z-index: 10;
@@ -1294,7 +1298,7 @@
      flex-direction: column;
      align-items: center;
      position: absolute;
      bottom: 0;
      bottom: 20px;
      width: 100%;
    }