From cf7077ed40e7e9a41e490128fc386936ad090ce8 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 27 六月 2025 14:40:26 +0800
Subject: [PATCH] 自定义tabbar处理底部安全区域
---
pages/kitchen/KitchenVideo.vue | 18 ++-
pages/health/healthVideo.vue | 7 +
pages/video/video-play.vue | 12 +
components/custom-tabbar.vue | 228 ++++++++++++++++++++++----------------------
pages/tabbar/index/home.vue | 7 +
5 files changed, 142 insertions(+), 130 deletions(-)
diff --git a/components/custom-tabbar.vue b/components/custom-tabbar.vue
index 7d29bed..5fb34e7 100644
--- a/components/custom-tabbar.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/health/healthVideo.vue b/pages/health/healthVideo.vue
index c404e82..3bf49d0 100644
--- a/pages/health/healthVideo.vue
+++ b/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(() => {
diff --git a/pages/kitchen/KitchenVideo.vue b/pages/kitchen/KitchenVideo.vue
index fe07b72..05e14d0 100644
--- a/pages/kitchen/KitchenVideo.vue
+++ b/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 {
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 4f3b20f..078a1bb 100644
--- a/pages/tabbar/index/home.vue
+++ b/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(() => {
diff --git a/pages/video/video-play.vue b/pages/video/video-play.vue
index a1eb904..157db00 100644
--- a/pages/video/video-play.vue
+++ b/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%;
}
--
Gitblit v1.8.0