提交

马宇豪

2024-08-29 893ff90c6e21fa3a5241a8ae9b33836037cd5912

 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>