From 305691dd3759e3bd95fdd70ff46693d04f2925d4 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 15 五月 2025 15:18:13 +0800
Subject: [PATCH] 自定义tabbar，首页视频使用不同颜色的tabbar
---
pages/tabbar/user/my.vue | 2
pages.json | 3
main.js | 5 +
pages/tabbar/cart/cartList.vue | 11 ++-
pages/tabbar/category/category.vue | 1
components/custom-tabbar.vue | 112 +++++++++++++++++++++++++++++++++++++
pages/tabbar/index/home.vue | 8 ++
7 files changed, 133 insertions(+), 9 deletions(-)
diff --git a/components/custom-tabbar.vue b/components/custom-tabbar.vue
new file mode 100644
index 0000000..c7e2139
--- /dev/null
+++ b/components/custom-tabbar.vue
@@ -0,0 +1,112 @@
+<!-- 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, index)"
+ >
+ <image
+ :src="selected === index ? item.selectedIconPath : item.iconPath"
+ class="tabbar-icon"
+ />
+ <text class="tabbar-text" :style="{color: selected === index ? selectedTextColor : color}">
+ {{item.text}}
+ </text>
+ </view>
+ </view>
+</template>
+
+<script>
+export default {
+ name: "CustomTabbar",
+ props: {
+ selected: {
+ type: Number,
+ default: 0
+ },
+ 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": "棣栭〉"
+ },
+ {
+ "pagePath": "/pages/tabbar/category/category",
+ "iconPath": "/static/tabbar/category.png",
+ "selectedIconPath": "/static/tabbar/category-s.png",
+ "text": "鍒嗙被"
+ },
+
+ {
+ "pagePath": "/pages/tabbar/cart/cartList",
+ "iconPath": "/static/tabbar/cart.png",
+ "selectedIconPath": "/static/tabbar/cart-s.png",
+ "text": "璐墿杞�"
+ },
+ {
+ "pagePath": "/pages/tabbar/user/my",
+ "iconPath": "/static/tabbar/mine.png",
+ "selectedIconPath": "/static/tabbar/mine-s.png",
+ "text": "鎴戠殑"
+ }
+ ]
+ }
+ },
+ methods: {
+ switchTab(item, index) {
+ console.log("鎵ц鍔�", item, index);
+ if (this.selected === index) 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;
+}
+
+.tabbar-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.tabbar-icon {
+ width: 24px;
+ height: 24px;
+ margin-bottom: 4px;
+}
+
+.tabbar-text {
+ font-size: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/main.js b/main.js
index aa20e0e..540a322 100644
--- a/main.js
+++ b/main.js
@@ -6,6 +6,11 @@
import config from '@/config/config';
import airBtn from "@/components/m-airbtn/index.vue";
import socketIO from './pages/mine/im/socket';
+
+// 鑷畾涔塼abbar
+import CustomTabbar from '@/components/custom-tabbar.vue'
+Vue.component('custom-tabbar', CustomTabbar)
+
/**
* 浠呭湪h5涓樉绀哄敜閱抋pp鍔熻兘
* 鍦╤5椤甸潰鎵嬪姩鎸傝浇
diff --git a/pages.json b/pages.json
index fdd962e..ed4763f 100644
--- a/pages.json
+++ b/pages.json
@@ -11,7 +11,7 @@
{
// "navigationBarTitleText" : "瑙嗛",
"enablePullDownRefresh" : false,
- "navigationStyle": "custom"
+ "navigationStyle": "custom" // 闅愯棌椤堕儴瀵艰埅鏍�
}
},
{
@@ -830,6 +830,7 @@
}
},
"tabBar": {
+ "custom": true,
"color": "#666",
"selectedColor": "#ff573e",
"borderStyle": "black",
diff --git a/pages/tabbar/cart/cartList.vue b/pages/tabbar/cart/cartList.vue
index 999f74a..dce2147 100644
--- a/pages/tabbar/cart/cartList.vue
+++ b/pages/tabbar/cart/cartList.vue
@@ -1,5 +1,5 @@
<template>
- <div class="wrapper">
+ <view class="wrapper">
<u-navbar :is-back="false" title="璐墿杞�">
<div slot="right">
<div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '缂栬緫' : '瀹屾垚'}}</div>
@@ -175,7 +175,8 @@
</view>
</div>
<u-toast ref="uToast" />
- </div>
+ <custom-tabbar bgColor="#ffffff" :selected="2"></custom-tabbar>
+ </view>
</template>
<script>
import * as API_Trade from "@/api/trade";
@@ -623,7 +624,7 @@
left: 0;
top: 0;
width: 100%;
- height: 100vh;
+ height: calc(100vh - 50px);
z-index: 99;
padding-bottom: var(--window-bottom);
display: flex;
@@ -688,7 +689,7 @@
}
.wrapper {
- height: 100%;
+ height: calc(100% - 50px);;
}
/deep/ .u-col {
@@ -774,7 +775,7 @@
justify-content: space-between;
position: fixed;
// #ifdef APP-PLUS || MP-WEIXIN
- bottom: 0;
+ bottom: 50px;
// #endif
// #ifdef H5
bottom: var(--window-bottom);
diff --git a/pages/tabbar/category/category.vue b/pages/tabbar/category/category.vue
index e273a9a..75bed5f 100644
--- a/pages/tabbar/category/category.vue
+++ b/pages/tabbar/category/category.vue
@@ -36,6 +36,7 @@
</view>
</scroll-view>
</view>
+ <custom-tabbar bgColor="#ffffff" :selected="1"></custom-tabbar>
</view>
</template>
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index b8f2587..6e9643b 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -81,6 +81,7 @@
</view>
</swiper-item>
</swiper>
+ <custom-tabbar bgColor="#333333" :selected="0" selectedTextColor="#ffffff"></custom-tabbar>
</view>
</template>
@@ -233,6 +234,9 @@
</script>
<style scoped>
+ ::v-deep .custom-tabbar {
+ border-top: none !important;
+ }
.video-container {
width: 100%;
height: 100vh;
@@ -253,7 +257,7 @@
.video-info {
width: 70%;
position: absolute;
- bottom: 50px;
+ bottom: 70px;
left: 20px;
color: #f8f8f8;
z-index: 10;
@@ -320,7 +324,7 @@
/* 鍟嗗搧閾炬帴鎮寕灞傛牱寮� */
.goods-link-warp {
position: absolute;
- bottom: 100px;
+ bottom: 160px;
left: 20px;
color: #f8f8f8;
z-index: 10;
diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index cbbab3c..62a836b 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -71,7 +71,7 @@
<!-- 甯哥敤宸ュ叿 -->
<tool />
-
+ <custom-tabbar bgColor="#ffffff" :selected="3"></custom-tabbar>
</view>
</template>
<script>
--
Gitblit v1.8.0