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, selectedIndex == i? '' : 'hover']"></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%;
      }
    }
    .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;
          &.hover{
            color: rgb(187, 187, 187);
          }
        }
      }
    }
  }
}
</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
      }
      uni.navigateTo({
        url: "/" + src,
      });
    },
  },
};
</script>