Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: 统一重构底部导航栏间距逻辑与显示规则

Browse Source 
1.  新增全局计算属性统一处理底部导航栏显示判断与间距样式
2.  替换多个页面的手写底部间距逻辑为通用样式
3.  新增路由匹配工具函数，支持灵活配置导航栏显示范围
4.  优化底部导航组件的显示条件判断
This commit is contained in:
ZF Sun
2026-06-16 11:25:54 +08:00
parent 6c6822ca16
commit 64d3ac8f8a
18 changed files with 141 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components-diy/diy-bottom-nav.vue
View File

@@ -1,5 +1,5 @@
<template>
<view data-component-name="diy-bottom-nav" v-if="tabBarList && tabBarList.list">
<view data-component-name="diy-bottom-nav" v-if="shouldShowTabBar">
<view class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
<view class="tabbar-border"></view>
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @tap.stop="redirectTo(item.link)">
@@ -110,7 +110,7 @@ export default {
},
packageEntryTab() {
return this.$store.state.packageEntryTab;
}
},
},
watch: {
cartChange: function (nval, oval) {

16
components-diy/diy-merch-list.vue
View File

@@ -5,15 +5,15 @@
<view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index"
:style="itemCss" @tap.stop="handlerClick(item)">
<view class="merch-img">
<view class="merch-img" @tap.stop="handlerClick(item)">
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix"
@error="imgError(index)" show-menu-by-longpress />
</view>
<view class="info-wrap">
<text class="title">{{ item.merch_name }}</text>
<text class="desc">{{ item.desc }}</text>
<view class="read-wrap"></view>
</view>
<text class="title" @tap.stop="handlerClick(item)">{{ item.merch_name }}</text>
<text class="desc">{{ item.desc }}</text>
<view class="read-wrap"></view>
</view>
</view>
</view>
</view>
@@ -27,14 +27,16 @@
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index"
:style="{ width: 100 / 4 + '%' }" @tap.stop="handlerClick(item)">
<view class="graphic-img" v-if="value.mode != 'text'"
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }"
@tap.stop="handlerClick(item)">
<image
:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
mode="aspectFill" show-menu-by-longpress
style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;" />
</view>
<text class="graphic-text"
style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);">
style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);"
@tap.stop="handlerClick(item)">
{{ item.merch_name }}
</text>
</view>