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

<template>
  <div class="hover_content">
    <div class="hover_menu flex">
      <div
        class="menu_icon"
        v-for="(menu, i) in menus"
        :key="i"
        @tap="click(i, menu.pagePath)"
      >
        <uni-transition mode-class="fade" show="true" v-if="selectedIndex == i">
          <img :src="menu.selectedIconPath"/>
        </uni-transition>
        <uni-transition mode-class="fade" show="true" v-else >
          <img :src="menu.iconPath"/>
        </uni-transition>
      </div>
    </div>
  </div>
</template>
<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;
    .menu_icon {
      transition: all 0.5s;
      img {
        width: 60rpx;
        height: 60rpx;
        border-radius: 100rpx;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      selectedIndex: getApp().globalData.selectedIndex,
      showselected: false,
      menus: [
        {
          pagePath: "pages/index/index",
          iconPath: "/static/tabbar/home-select.png",
          selectedIconPath: "/static/tabbar/home-selected.png",
          text: "首页",
        },
        {
          pagePath: "pages/selfCenter/index",
          iconPath: "/static/tabbar/user-select.png",
          selectedIconPath: "/static/tabbar/user-selected.png",
          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.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/supply/index",
        "pages/enterprise/index",
        "pages/service/index",
      ];
      for (let i = 0; i < arr.length; i++) {
        let e = arr[i];
        if (e == url) {
          isTure = true;
          return isTure;
        }
      }
      return isTure;
    },
  },
};
</script>