konggang-city-miniprogram/components/foot-tabs/footTabs.vue

<template>
  <view class="hover_content">
    <view class="hover_menu flex">
      <view
        class="menu_icon"
        v-for="(menu, i) in menus"
        :key="i"
        @tap="click(i, menu.pagePath)"
      >
        <view
          class="iconBox" 
          :class="{ hover: selectedIndex == i }"
        >
          <span class="iconfont" :class="menu.icon"></span>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped src="../../static/iconfont.css">
</style>
<style lang="scss" scoped>
.hover_content {
  z-index: 999;
  width: 30%;
  padding: 1.5% 1%;
  border-radius: 100rpx;
  position: fixed;
  left: 50%;
  top: 90%;
  transform: translateX(-50%);
  box-shadow: rgba(100, 100, 111, 0.2) 0rpx 7rpx 29rpx 0rpx;
  background-color: #fff;
  .hover_menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10rpx;
    .menu_icon {
      .iconBox {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        &.hover {
          background: rgb(14, 92, 246);
        }
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          &.hoverd {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            color: rgb(187, 187, 187);
          }
          color: #fff;
          font-size: 40rpx;
          font-family: "iconfont" !important;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      selectedIndex: getApp().globalData.selectedIndex,
      showselected: false,
      menus: [
        {
          pagePath: "pages/index/index",
          icon: "icon-zhuye",
          text: "首页",
        },
        {
          pagePath: "pages/selfCenter/index",
          icon: "icon-geren",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    click(index, src) {
      var pages = getCurrentPages(); //获取加载的页面
      var currentPage = pages[pages.length - 1]; //获取当前页面的对象
      var url = currentPage.route; //当前页面url
      getApp().globalData.selectedIndex = index;
      let res_url = this.check(url);
      let res_src = this.check(src);
      // console.log(res_url,res_src);
      if (!(res_url && res_src) && !(res_url == false && res_src == false)) {
        // uni.redirectTo({
        // 	 url: "/" + src,
        // });
        uni.navigateTo({
          url: "/" + src,
        });
      }
    },
    check(url) {
      let isTure = false;
      let arr = [
        "pages/index/index",
        "pages/park/park_deatil",
        "pages/appeal/index",
        "pages/appeal/myAppeal",
        "pages/appeal/putAppeal",
        "pages/appeal/appeal_detail",
        "pages/policy/index",
        "pages/policy/policy_deatil",
        "pages/park/index",
        "pages/park/map_search",
        "pages/activity/index",
        "pages/activity/activity_deatil",
        "pages/supply/index",
        "pages/supply/putSupply",
        "pages/supply/mySupply",
        "pages/supply/supply_detail",
        "pages/enterprise/index",
        "pages/enterprise/enterprise_detail",
        "pages/enterprise/product_detail",
        "pages/service/index",
        "pages/auth/index",
        "pages/notice/index",
        "pages/notice/notice_deatil",
        "pages/attract/index",
        "pages/attract/attract_deatil",
      ];
      for (let i = 0; i < arr.length; i++) {
        let e = arr[i];
        if (e == url) {
          isTure = true;
          return isTure;
        }
      }
      return isTure;
    },
  },
};
</script>