From 893ff90c6e21fa3a5241a8ae9b33836037cd5912 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Thu, 29 Aug 2024 15:19:17 +0800
Subject: [PATCH] 提交
---
pages/tabBar/tabBarIndex.vue | 53 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 39 insertions(+), 14 deletions(-)
diff --git a/pages/tabBar/tabBarIndex.vue b/pages/tabBar/tabBarIndex.vue
index b9c0e1b..ea10807 100644
--- a/pages/tabBar/tabBarIndex.vue
+++ b/pages/tabBar/tabBarIndex.vue
@@ -6,14 +6,14 @@
:fixed="false"
:placeholder="false"
:safeAreaInsetBottom="false"
- activeColor="#48bff4"
+ activeColor="#0f7ff9"
>
<u-tabbar-item v-for="(item, index) in tabBarList"
:key="index"
:text="item.text"
:name="item.pagePath"
@click="click_page"
- >
+ :class="{active: currentPagePath == item.pagePath}">
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
</u-tabbar-item>
@@ -39,31 +39,56 @@
return {
}
},
+ mounted(){
+
+ },
methods: {
click_page(item){
let page = '/' + item;
- uni.switchTab({
- url: page,
- success:function(res){
- console.log(res);
- console.log("成功")
- }
+ console.log("跳转",item)
+ uni.reLaunch({
+ url: page
})
}
}
}
</script>
-<style>
+<style lang="scss">
.tabBar_css{
position: fixed;
- bottom: 0;
- background-color: red;
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
z-index: 9999;
- width: 100%;
+ width: calc(100vw - 20px);
+ border-radius: 99px;
+ overflow: hidden;
+ box-shadow: 0 -6px 10px rgba(150, 150, 150, 0.1), 0 6px 10px rgba(150, 150, 150, 0.1);
+
+ /deep/ .u-tabbar__content{
+ background-color: rgba(255,255,255,.4);
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
+ border: 1px solid rgba(255,255,255,.8);
+ }
+
+ /deep/ .u-tabbar .u-border-top{
+ border-color: rgba(0,0,0,0) !important;
+ }
}
.u-page__item__slot-icon{
- width: 24px;
- height: 24px;
+ width: 20px;
+ height: 20px;
+}
+/deep/ .u-tabbar-item__text{
+ margin-top: 0 !important;
+ line-height: 20px !important;
+}
+
+.active{
+ /deep/ .u-tabbar-item__text{
+
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.2