medicine_app/components/z-navigation/z-navigation.vue

<template>
  <view v-if="iosHide">
    <view class="footer_box" :class="{ footer_bg: bg }">
      <view
        v-for="(item, index) of navigationList"
        :key="index"
        class="footer_item"
      >
        <view class="footer_nav_item" @click="onPageJump(item.pagePath)">
          <image
            v-if="item.pagePath == path"
            class="footer_nav_item_image footer_nav_item_image_scale"
            :src="'/' + item.selectedIconPath"
            mode="aspectFit"
          ></image>
          <image
            v-else
            class="footer_nav_item_image"
            :src="'/' + item.iconPath"
            mode="aspectFit"
          ></image>
          <text 
            class="footer_nav_item_text"
            :class="[item.pagePath == path ? 'footer_item_text_active' : '',index == 1 && item.pagePath == path ? 'redText' :'']"
            >{{ item.text }}</text
          >
        </view>
      </view>
    </view>
    <view v-if="bg" class="footer_station"></view>
  </view>
  <view v-else>
    <view class="footer_box" :class="{ footer_bg: bg }">
      <view
        v-for="(item, index) of navigationIos"
        :key="index"
        class="footer_item"
      >
        <view class="footer_nav_item" @click="onPageJump(item.pagePath)">
          <image
            v-if="item.pagePath == path"
            class="footer_nav_item_image footer_nav_item_image_scale"
            :src="'/' + item.selectedIconPath"
            mode="aspectFit"
          ></image>
          <image
            v-else
            class="footer_nav_item_image"
            :src="'/' + item.iconPath"
            mode="aspectFit"
          ></image>
          <text
            class="footer_nav_item_text"
            :class="[
              item.pagePath == path ? 'footer_item_text_active' : 'normal_text',
            ]"
            >{{ item.text }}</text
          >
        </view>
      </view>
    </view>
    <view v-if="bg" class="footer_station"></view>
  </view>
</template>
<script>
export default {
  props: {
    bg: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      path: "",
      navigationList: [
        {
          pagePath: "pages/peanut/home",
          iconPath: "static/tab/icon1_n.png",
          selectedIconPath: "static/tab/icon1_y.png",
          text: "首页",
        },
		{
		  pagePath: "pages/taihu/index",
		  iconPath: "static/tab/tab_nor_03.png",
		  selectedIconPath: "static/tab/tab_cur_03.png",
		  text: "太湖公益",
		},
		{
		  pagePath: "pages/bookShop/orderList",
		  iconPath: "static/tab/order.png",
		  selectedIconPath: "static/tab/order_active.png",
		  text: "订单",
		},    
        {
          pagePath: "pages/mine/mine/index",
          iconPath: "static/tab/tab_nor_04.png",
          selectedIconPath: "static/tab/tab_cur_04.png",
          text: "我的",
        },
      ],
      navigationIos: [
        {
          pagePath: "pages/peanut/home",
          iconPath: "static/tab/icon1_n.png",
          selectedIconPath: "static/tab/icon1_y.png",
          text: "首页",
        },
        {
          pagePath: "pages/taihu/index",
          iconPath: "static/tab/tab_nor_03.png",
          selectedIconPath: "static/tab/tab_cur_03.png",
          text: "太湖公益",
        },
        {
          pagePath: "pages/bookShop/orderList",
          iconPath: "static/tab/order.png",
          selectedIconPath: "static/tab/order_active.png",
          text: "订单",
        },
        {
          pagePath: "pages/mine/mine/index",
          iconPath: "static/tab/tab_nor_04.png",
          selectedIconPath: "static/tab/tab_cur_04.png",
          text: "我的",
        },
      ],
    };
  },
  //第一次加载
  created() {
    //获取所有页面
    let currentPages = getCurrentPages();
    let page = currentPages[currentPages.length - 1];
    this.path = page.route;
  },
  //方法
  methods: {
    onPageJump(url) {
      if (this.path !== url) {
        uni.switchTab({
          url: "/" + url,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.normal_text {
  color: #fff;
}
.footer_station {
  height: 110rpx;
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer_box {
  height: 110rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  z-index: 502;
  box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer_bg {
  background-color: #fff;
  box-shadow: 0 0px 10px 1px #0000001a;
}

.footer_item {
  position: relative;
  flex: 1;
}

.footer_nav_item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.footer_nav_item:active {
  background-color: rgba($color: #fff, $alpha: 0.1);
}

.footer_nav_item_text {
  font-size: 26rpx;
  color: #7b7b7b;
  margin-top: 6rpx;
}
.footer_nav_item_text.redText{color: red;}

.footer_nav_item_text_active {
  color: #f9a633;
}

.footer_nav_item_image {
  width: 50rpx;
  height: 50rpx;
}

.footer_nav_item_image_scale {
  animation: mescrollUpRotate 0.6s linear 1;
}

@keyframes mescrollUpRotate {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.footer_item_text_active {
  color: #3983ff;
  font-weight: bold;
}
</style>