优化

components/tabbar/index.vue

-<style scoped>
-	 .tabbarMain {
-  height: 100upx;
-  position: fixed;
-  z-index: 50;
-  flex: 1;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 99999999;
-  border-top: 1upx solid #ddd;
-  padding-top: 96rpx;
-  background: #fff;
-}
-.tabbarMainIphone {
-  height: 156upx;
-  padding-bottom: 64upx;
-}
-.tabBtnMina {
-  width: 750upx;
-  height: 88upx;
-  position: absolute;
-  z-index: 2;
-  bottom: 0;
-  flex-direction: row;
-  display: flex;
-  left: 0;
-  right: 0;
-  z-index: 99999999;
-}
-.tabBtnMinaIphone {
-  height: 156upx;
-  padding-bottom: 64upx;
-}
-.imgse {
-  height: 48upx;
-  width: 48upx;
-}
-.txtBtn {
-  font-size: 24upx;
-  color: #666666;
-}
-.txtBtnSel {
-  font-size: 24upx;
-  color: #333333;
-}
-.itmMain {
-  width: 150upx;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-.imgseTs {
-  width: 150upx;
-  height: 140upx;
-  margin-bottom: 90upx;
-  position: relative;
-  z-index: 1;
-  bottom: 0upx;
-}
-
-.btnfixMin {
-  width: 750upx;
-  height: 178upx;
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-}
-.btnfixMinIphone {
-  bottom: 64upx;
-}
-.fixTpm {
-  width: 150upx;
-  height: 140upx;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 0;
-}
-.imgseTsAnds {
-  width: 150upx;
-  height: 150upx;
-  position: fixed;
-  z-index: 1;
-  bottom: 10upx;
-  border-radius: 150upx;
-} 
-</style>
 <template>
-  <view
-    class="tabbarMain bar-box"
-    :class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
-    v-if="navs && navs.length > 0"
-  >
-    <view
-      class="tabBtnMina"
-      :class="[flagTypeInfo ? 'tabBtnMinaIphone' : '']"
-      mode=""
-    >
-      <view
-        class="itmMain"
-        v-for="(x, i) in navs"
-        :key="i"
+  <view class="tabbarMain" :style="{paddingBottom: `${bottomSafeHeight}px`}" v-if="navs.length">
+    <view class="tabBtnMina">
+      <view 
+        class="itmMain" 
+        v-for="(x, i) in navs" 
+        :key="i" 
         @click.stop="goUrl(x.url)"
       >
         <image
           class="imgse"
-          :fade-show="false"
-          v-if="active != i"
+          :src="active === i ? x.active_icon : x.icon"
           mode="aspectFit"
-          :src="x.icon"
-        ></image>
-        <image
-          class="imgse"
-          :fade-show="false"
-          v-if="active === i"
-          mode="aspectFit"
-          :src="x.active_icon"
-        ></image>
-        <text
-          class="txtBtn"
-          :style="{ color: active == i ? x.active_color : x.color }"
-          >{{ x.text }}</text
-        >
+        />
+        <text class="txtBtn" :style="{ color: active == i ? x.active_color : x.color }">
+          {{ x.text }}
+        </text>
       </view>
     </view>
   </view>
-</template> 
+</template>
 
 <script>
 export default {
   data() {
     return {
       active: 0,
-      platforms: "",
-      leftWidth: 0,
-      flagTypeInfo: false,
       navs: [],
-      crtPath: "",
+      bottomSafeHeight: 0,
+	  currentPath:''
     };
   },
-  created() {
-  },
   mounted() {
-    this.flagTypeInfo = this.$uiConfig.is_bang;
-    let tempSystem = uni.getSystemInfoSync();
-    this.platforms = tempSystem.platform;
-
-    this.$nextTick(() => {
-      // #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE ||APP-VUE
-      if (this.platforms == "android") {
-        let temp = this.$refs.leftWidth;
-        this.leftWidth = tempSystem.screenWidth / 2;
-      }
-      // #endif
-    });
-    if (uni.getStorageSync("navs")) {
-      this.navs = uni.getStorageSync("navs") ?? [];
-    } else {
-      setTimeout(() => {
-        this.navs = uni.getStorageSync("navs") ?? [];
-        this.activeHandler();
-      }, 3000);
-    }
-    this.activeHandler();
+    this.navs = uni.getStorageSync("navs") || []
+    this.calcSafeArea()
+    this.activeHandler()
   },
   methods: {
+    calcSafeArea() {
+      const { safeAreaInsets } = uni.getSystemInfoSync()
+      this.bottomSafeHeight = safeAreaInsets.bottom > 0 ? safeAreaInsets.bottom : 10
+    },
     activeHandler() {
-      let t = getCurrentPages();
-
-      // #ifdef MP-WEIXIN
-      let query = t[t.length - 1].__displayReporter.query;
-      let queryString = "";
-      for (var k in query) {
-        queryString += `&${k}=${query[k]}`;
-      }
-      if (queryString != "") {
-        queryString = "?" + queryString.substring(1, queryString.length);
-      }
-      this.crtPath = "/" + t[t.length - 1].route + queryString;
-      // #endif
-      //  #ifdef MP-ALIPAY
-      this.crtPath = t[t.length - 1].$page.fullPath;
-      // #endif
-      this.navs.forEach((x, i) => {
-        if (x.url == this.crtPath) {
-          this.active = i;
+      const pages = getCurrentPages()
+      const currentPage = pages[pages.length - 1]
+      const query = currentPage.options
+      const queryString = Object.keys(query)
+        .map(key => `${key}=${query[key]}`)
+        .join('&')
+		this.currentPath = `/${currentPage.route}${queryString ? '?' + queryString : ''}`
+      
+      this.navs.forEach((item, index) => {
+        if (this.currentPath === item.url) {
+          this.active = index
         }
-      });
+      })
     },
     goUrl(url) {
-      if (this.crtPath != url) {
-        uni.redirectTo({
-          url: url,
-        });
+      if (this.currentPath !== url) {
+        uni.redirectTo({ url })
       } else {
-        uni.reLaunch({
-          url: url,
-        });
-      }
-    },
-  },
-};
+		  uni.reLaunch({
+		  	url
+		  })
+	  }
+    }
+  }
+}
 </script>
 
-<!-- <template>
-	<view class="bar-box">
-		<div class="bar-box-line">
-			<view class="bar-item" v-for="(x,i) in menus" @click="changeMenuHandler(x)">
-				<i class="icon iconfont" :class="[x.icon]" v-if="current != x.page"></i>
-				<view class="acitve" v-else>
-					{{x.name}}
-				</view>
-			</view>
-		</div>
-	</view>
-</template> 
-<script>
-	export default {
-		data() {
-			return {
-				menus: [],
-				current: ''
-			};
-		},
-		mounted() {
-			let pages = getCurrentPages()
-			this.current = "/" + pages[pages.length - 1].route ? ? ''
-			this.menus = [{
-					name: '首页',
-					icon: 'icon-home',
-					page: '/pages/index/index'
-				},
-				{
-					name: '订单',
-					icon: 'icon-Work',
-					page: '/pages/jiuzhai/jz_MyOrder'
-				},
-				{
-					name: '我的',
-					icon: 'icon-my1',
-					page: '/pages/user-center/user-center'
-				}
-			]
-		},
-		methods: {
-			changeMenuHandler(menu) {
-				this.current = menu.page
-				if (menu.page.indexOf('pages') != -1) {
-					uni.redirectTo({
-						url: menu.page
-					})
-				}
-			}
-		}
-	}
-</script>
--->
 <style>
-	/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
-	@font-face {
-		font-family: "nav-font";
-		src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/tcIItWsk6dTo.woff2") format("woff2"),
-			url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/RZzswoFvsjUs.woff") format("woff");
-		font-display: swap;
-	}
-
-	.bar-box {
-		padding-bottom: env(safe-area-inset-bottom);
-		background-color: #FFF;
-		border-top-left-radius: 20rpx;
-		border-top-right-radius: 20rpx;
-		box-shadow: 0 0 6px rgba(0, 0, 0, .12);
-		position: fixed;
-		z-index: 50;
-		flex: 1;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 99999999;
-	}
-
-	.bar-box-line {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		align-items: center;
-		padding: 20upx 0 30upx;
-	}
-
-	.bar-box-line.uninset {
-		padding: 20upx 0 40upx;
-	}
+.tabbarMain {
+  position: fixed;
+  z-index: 999;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-top: 1rpx solid #E0E0E0;
+  padding: 20rpx 0 0;
+}
 
-	.bar-box-line.inset {
-		padding: 20upx 0;
-	}
+.tabBtnMina {
+  display: flex;
+  flex-direction: row;
+  
+}
 
-	.bar-box-line .bar-item {
-		flex: 1;
-		width: 1px;
-		text-align: center;
-		color: #abadb9;
-		position: relative;
-	}
+.itmMain {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 
-	.bar-box-line .bar-item .icon {
-		font-size: 50rpx;
-	}
+.imgse {
+  width: 48rpx;
+  height: 48rpx;
+}
 
-	.bar-box-line .bar-item .acitve {
-		font-size: 32rpx;
-		font-weight: bold;
-		color: #1F2429;
-		text-align: center;
-		font-family: nav-font;
-	}
+.txtBtn {
+  font-size: 20rpx;
+  color: #666;
+  margin-top: 8rpx;
+  line-height: 1;
+}
 
-	.bar-box-line .bar-item .acitve::after {
-		display: inline-block;
-		content: ' ';
-		width: 4px;
-		height: 4px;
-		border-radius: 4px;
+.txtBtnSel {
+  color: #333;
+  font-size: 24rpx;
+}
+</style>
\ No newline at end of file
-		background-color: #1F2429;
-		position: absolute;
-		left: calc(50% - 2px);
-		top: 60rpx;
-	}
-</style>