wikiboss/shanghaipeiwan
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

fix(tabbar): 修复微信小程序TabBar样式脱节导致图标膨胀为320px巨型图的样式问题

浏览代码
这个提交包含在：
xcbyy
2026-10-14 09:09:59 +08:00
父节点 010edc130f
当前提交 fee661789a
共有 2 个文件被更改，包括 92 次插入 和 15 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

61
pwuniapp/App.vue
查看文件

@@ -179,6 +179,67 @@ view, text, image, input, button {
color: transparent;
}
/* 底部自定义 TabBar 全局兜底规范，锁死图标尺寸与定位，杜绝微信小程序中 image 标签退化为 320x240 默认尺寸 */
.custom-tabbar-root {
width: 100%;
.tabbar-container {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
max-width: 450px !important;
box-sizing: border-box !important;
height: calc(118rpx + env(safe-area-inset-bottom)) !important;
display: flex !important;
align-items: flex-start !important;
justify-content: space-around !important;
z-index: 999 !important;
}
.tab-item {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
height: 118rpx !important;
}
.tab-icon-svg {
width: 50rpx !important;
height: 50rpx !important;
max-width: 50rpx !important;
max-height: 50rpx !important;
flex-shrink: 0 !important;
}
.plus-circle-btn {
width: 96rpx !important;
height: 96rpx !important;
min-width: 96rpx !important;
min-height: 96rpx !important;
max-width: 96rpx !important;
max-height: 96rpx !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
.plus-svg {
width: 48rpx !important;
height: 48rpx !important;
flex-shrink: 0 !important;
}
}
.radar-icon-box {
width: 52rpx !important;
height: 52rpx !important;
.radar-svg {
width: 52rpx !important;
height: 52rpx !important;
flex-shrink: 0 !important;
}
}
}
/* 移动端与 H5 响应式体验优化 */
/* #ifdef H5 */
html, body {

46
pwuniapp/components/CustomTabBar.vue
查看文件

@@ -1,19 +1,20 @@
<template>
<view class="custom-tabbar-root" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
<!-- 底部占位块，确保内容不被导航栏遮挡 -->
<view class="tabbar-placeholder"></view>
<view class="tabbar-placeholder" style="width: 100%; pointer-events: none;"></view>
<!-- 固定在屏幕底部的导航栏实体 -->
<view class="tabbar-container">
<view class="tabbar-container" style="position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 450px; display: flex; align-items: flex-start; justify-content: space-around; z-index: 999;">
<!-- 发单人端 (5 项：首页 / 附近活动 / 我要发单+ / 友圈 / 个人中心) -->
<template v-if="currentRole === 'PLAYER'">
<!-- 1. 首页 -->
<view
class="tab-item btn-active"
:class="{ active: current === 'home' }"
style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
@click="switchTab('home', '/pages/index/index')"
>
<image class="tab-icon-svg" :src="getTabIcon('home')" mode="aspectFit" />
<image class="tab-icon-svg" :src="getTabIcon('home')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
<text class="tab-label">首页</text>
</view>
@@ -21,16 +22,17 @@
<view
class="tab-item btn-active"
:class="{ active: current === 'activity' }"
style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
@click="switchTab('activity', '/pages/activity/list')"
>
<image class="tab-icon-svg" :src="getTabIcon('activity')" mode="aspectFit" />
<image class="tab-icon-svg" :src="getTabIcon('activity')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
<text class="tab-label">附近活动</text>
</view>
<!-- 3. 我要发单 (核心大圆圈 + 突出悬浮按键，居中对称) -->
<view class="tab-item special-item-wrap btn-active" @click="handlePublish">
<view class="plus-circle-btn">
<image class="plus-svg" :src="ICONS.tabPlus" mode="aspectFit" />
<view class="tab-item special-item-wrap btn-active" style="flex: 1; height: 118rpx; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative;" @click="handlePublish">
<view class="plus-circle-btn" style="width: 96rpx; height: 96rpx; min-width: 96rpx; min-height: 96rpx; max-width: 96rpx; max-height: 96rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<image class="plus-svg" :src="ICONS.tabPlus" mode="aspectFit" style="width: 48rpx; height: 48rpx; flex-shrink: 0;" />
</view>
<text class="tab-label special-label">我要发单</text>
</view>
@@ -39,9 +41,10 @@
<view
class="tab-item btn-active"
:class="{ active: current === 'community' }"
style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
@click="switchTab('community', '/pages/community/index')"
>
<image class="tab-icon-svg" :src="getTabIcon('community')" mode="aspectFit" />
<image class="tab-icon-svg" :src="getTabIcon('community')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
<text class="tab-label">友圈</text>
</view>
@@ -49,9 +52,10 @@
<view
class="tab-item btn-active"
:class="{ active: current === 'user' }"
style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
@click="switchTab('user', '/pages/user/index')"
>
<image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" />
<image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
<text class="tab-label">个人中心</text>
</view>
</template>
@@ -62,9 +66,10 @@
<view
class="tab-item btn-active"
:class="{ active: current === 'hall' }"
style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
@click="switchTab('hall', '/pages/expert/hall')"
>
<image class="tab-icon-svg" :src="getTabIcon('hall')" mode="aspectFit" />
<image class="tab-icon-svg" :src="getTabIcon('hall')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
<text class="tab-label">接单大厅</text>
</view>
@@ -72,11 +77,12 @@
<view
class="tab-item radar-item-wrap btn-active"
:class="{ active: current === 'radar' }"
style="flex: 1; height: 118rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;"
@click="switchTab('radar', '/pages/expert/radar')"
>
<view class="radar-badge-box">
<view class="radar-icon-box" :class="{ 'radar-anim': current === 'radar' }">
<image class="radar-svg" :src="getTabIcon('radar')" mode="aspectFit" />
<view class="radar-badge-box" style="position: relative; display: flex; align-items: center; justify-content: center;">
<view class="radar-icon-box" :class="{ 'radar-anim': current === 'radar' }" style="width: 52rpx; height: 52rpx; display: flex; align-items: center; justify-content: center;">
<image class="radar-svg" :src="getTabIcon('radar')" mode="aspectFit" style="width: 52rpx; height: 52rpx; flex-shrink: 0;" />
</view>
<text class="radar-pill">附近5km</text>
</view>
@@ -87,9 +93,10 @@
<view
class="tab-item btn-active"
:class="{ active: current === 'user' }"
style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 118rpx; position: relative;"
@click="switchTab('user', '/pages/user/index')"
>
<image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" />
<image class="tab-icon-svg" :src="getTabIcon('user')" mode="aspectFit" style="width: 50rpx; height: 50rpx; flex-shrink: 0;" />
<text class="tab-label">个人中心</text>
</view>
</template>
@@ -97,6 +104,15 @@
</view>
</template>
<script>
export default {
options: {
styleIsolation: 'apply-shared',
virtualHost: true
}
};
</script>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ICONS, getTabIconUri } from '@/common/icons.js';
@@ -180,7 +196,7 @@ const handlePublish = () => {
};
</script>
<style lang="scss" scoped>
<style lang="scss">
.custom-tabbar-root {
width: 100%;