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

<template>
  <view class="hover_content">
    <view class="hover_menu flex">
      <div class="sider" :class="isSider ? 'hoverd' : 'hover'"></div>
      <view
        class="menu_icon"
        v-for="(menu, i) in menus"
        :key="i"
        @tap="click(i, menu.pagePath)"
      >
        <view class="iconBox">
          <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;
    .sider {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      left: 14%;
      transition: all 0.3s;
      background: rgb(14, 92, 246);
      &.hover {
        left: 14%;
        background: rgb(14, 92, 246);
      }
      &.hoverd {
        left: 61%;
        .iconfont {
          color: rgb(187, 187, 187);
        }
      }
    }
    .menu_icon {
      position: relative;
      .iconBox {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          z-index: 999;
          color: #fff;
          font-size: 30rpx;
          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,
      isSider: getApp().globalData.isSider,
      menus: [
        {
          pagePath: "pages/index/index",
          icon: "icon-zhuye",
          text: "首页",
        },
        {
          pagePath: "pages/selfCenter/index",
          icon: "icon-geren",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    click(index, src) {
      if (index == 0) {
        this.isSider = false;
        getApp().globalData.isSider = false
      } else {
        this.isSider = true;
        getApp().globalData.isSider = true
      }
      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)) {
        // if (index == 0) {
        //   getApp().globalData.isSider = false;
        // } else {
        //   getApp().globalData.isSider = true;
        // }
        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>