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

xiangpei

2025-06-27 cf7077ed40e7e9a41e490128fc386936ad090ce8

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

 components/custom-tabbar.vue

@@ -1,126 +1,126 @@
<!-- 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}">
        {{item.text}}
      </text>
    </view>
  </view>
    <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>
    </view>
</template>

<script>
export default {
  name: "CustomTabbar",
  props: {
    selected: {
      type: String,
      default: 'index'
    },
    bgColor: {
      type: String,
      default: '#333333'
    },
    selectedTextColor: {
      type: String,
      default: '#ff573e'
    }
  },
  data() {
    return {
      color: '#999999',
      list: [
            {
                "pagePath": "/pages/tabbar/index/home",
                "iconPath": "/static/tabbar/home.png",
                "selectedIconPath": "/static/tabbar/home-s.png",
                "text": "首页",
                "key": 'index'
            },
            {
                // "pagePath": "/pages/tabbar/category/category",
                "pagePath": "/pages/kitchen/KitchenVideo",
				
                "iconPath": "/static/tabbar/category.png",
                "selectedIconPath": "/static/tabbar/category-s.png",
                "text": "神厨",
                "key": 'kitchen'
            },
            {
                "pagePath": "/pages/tabbar/video/video",
                "iconPath": "/static/tabbar/video1.png",
                "selectedIconPath": "/static/tabbar/video1-selected.png",
                "key": 'video'
    export default {
        name: "CustomTabbar",
        props: {
            selected: {
                type: String,
                default: 'index'
            },
            {
                "pagePath": "/pages/tabbar/cart/cartList",
                "iconPath": "/static/tabbar/cart.png",
                "selectedIconPath": "/static/tabbar/cart-s.png",
                "text": "购物车",
                "key": 'buyCar'
            },
            {
                "pagePath": "/pages/tabbar/user/my",
                "iconPath": "/static/tabbar/mine.png",
                "selectedIconPath": "/static/tabbar/mine-s.png",
                "text": "我的",
                "key": 'my'
            }
      ]
    }
  },
  methods: {
    switchTab(item) {
        console.log("执行力", item);
      if (this.selected === item.key) return;
      uni.switchTab({
        url: item.pagePath
      });
    }
  }
}
            bgColor: {
                type: String,
                default: '#333333'
            },
            selectedTextColor: {
                type: String,
                default: '#ff573e'
            }
        },
        data() {
            return {
                color: '#999999',
                marginBottom: 0,
                list: [{
                        "pagePath": "/pages/tabbar/index/home",
                        "iconPath": "/static/tabbar/home.png",
                        "selectedIconPath": "/static/tabbar/home-s.png",
                        "text": "首页",
                        "key": 'index'
                    },
                    {
                        // "pagePath": "/pages/tabbar/category/category",
                        "pagePath": "/pages/kitchen/KitchenVideo",

                        "iconPath": "/static/tabbar/category.png",
                        "selectedIconPath": "/static/tabbar/category-s.png",
                        "text": "神厨",
                        "key": 'kitchen'
                    },
                    {
                        "pagePath": "/pages/tabbar/video/video",
                        "iconPath": "/static/tabbar/video1.png",
                        "selectedIconPath": "/static/tabbar/video1-selected.png",
                        "key": 'video'
                    },
                    {
                        "pagePath": "/pages/tabbar/cart/cartList",
                        "iconPath": "/static/tabbar/cart.png",
                        "selectedIconPath": "/static/tabbar/cart-s.png",
                        "text": "购物车",
                        "key": 'buyCar'
                    },
                    {
                        "pagePath": "/pages/tabbar/user/my",
                        "iconPath": "/static/tabbar/mine.png",
                        "selectedIconPath": "/static/tabbar/mine-s.png",
                        "text": "我的",
                        "key": 'my'
                    }
                ]
            }
        },
        created() {
            console.log("底部安全区域", uni.getSystemInfoSync().safeAreaInsets);
            this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
        },
        methods: {
            switchTab(item) {
                console.log("执行力", item);
                if (this.selected === item.key) return;
                uni.switchTab({
                    url: item.pagePath
                });
            }
        }
    }
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #ededed;
  box-sizing: border-box;
}
    .custom-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-top: 1px solid #ededed;
        box-sizing: border-box;
    }

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.video-add {
  width: 30px !important;
  height: 30px !important;
}
.tabbar-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
    .tabbar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.tabbar-text {
  font-size: 10px;
}
    .video-add {
        width: 30px !important;
        height: 30px !important;
    }

    .tabbar-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }

    .tabbar-text {
        font-size: 10px;
    }
</style>

 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,11 +367,12 @@
    this.startHidenTime = Date.now()
  },
  onLoad() {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync();
      this.buttonHeight = systemInfo.statusBarHeight;
    this.getKitchenTypeList();
    this.loadVideos();
    this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.buttonHeight = systemInfo.statusBarHeight;
    this.getKitchenTypeList();
    this.loadVideos();
  },
  onReady() {
    // 初始化视频上下文
@@ -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%;
    }