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

xiangpei

2025-06-27 cf7077ed40e7e9a41e490128fc386936ad090ce8

 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%;
   }