template3/components/shortcut/index.vue

<template>
  <view class="shortcut" :style="{ '--right': `${rightPx}px`, '--bottom': `${bottomPx}px` }">
    <!-- 首页 -->
    <view class="nav-item" :class="[isShow ? 'show_80' : (transparent ? '' : 'hide_80')]" @click="onTargetPage(0)">
      <text class="iconfont icon-home"></text>
    </view>
    <!-- 分类页 -->
    <view class="nav-item" :class="[isShow ? 'show_60' : (transparent ? '' : 'hide_60')]" @click="onTargetPage(1)">
      <text class="iconfont icon-cate"></text>
    </view>
    <!-- 购物车 -->
    <view class="nav-item" :class="[isShow ? 'show_40' : (transparent ? '' : 'hide_40')]" @click="onTargetPage(2)">
      <text class="iconfont icon-cart"></text>
    </view>
    <!-- 个人中心 -->
    <view class="nav-item" :class="[isShow ? 'show_20' : (transparent ? '' : 'hide_20')]" @click="onTargetPage(3)">
      <text class="iconfont icon-profile"></text>
    </view>
    <!-- 显示隐藏开关 -->
    <view class="nav-item nav-item__switch" :class="{ shortcut_click_show: isShow }" @click="onToggleShow()">
      <text class='iconfont icon-daohang'></text>
    </view>
  </view>
</template>

<script>
  import { getTabBarLinks } from '@/core/app'

  export default {

    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      right: {
        type: Number,
        default: 30
      },
      bottom: {
        type: Number,
        default: 100
      }
    },

    data() {
      return {
        // 弹窗显示控制
        isShow: false,
        transparent: true
      }
    },

    computed: {
      rightPx() {
        return uni.upx2px(this.right)
      },
      bottomPx() {
        return uni.upx2px(this.bottom)
      }
    },

    methods: {




      /**
       * 导航菜单切换事件
       */
      onToggleShow() {
        const app = this
        app.isShow = !app.isShow
        app.transparent = false
      },

      /**
       * 导航页面跳转
       */
      onTargetPage(index = 0) {
        const tabLinks = getTabBarLinks()
        this.$navTo(tabLinks[index])
      }

    }
  }
</script>

<style lang="scss" scoped>
  /* 快捷导航 */
  .shortcut {
    position: fixed;
    right: calc(var(--window-right) + var(--right));
    bottom: calc(var(--window-bottom) + var(--bottom));
    width: 76rpx;
    height: 76rpx;
    line-height: 1;
    z-index: 5;
    border-radius: 50%;
  }

  /* 导航菜单元素 */
  .nav-item {
    position: absolute;
    bottom: 0;
    padding: 0;
    width: 76rpx;
    height: 76rpx;
    line-height: 76rpx;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    transform: rotate(0deg);
    opacity: 0;
  }

  .nav-item .iconfont {
    font-size: 40rpx;
  }

  /* 导航开关 */

  .nav-item__switch {
    opacity: 1;
  }

  .shortcut_click_show {
    margin-bottom: 0;
    background: #ff5454;
  }

  /* 显示动画 */

  .show_80 {
    bottom: 384rpx;
    animation: show_80 0.3s forwards;
  }

  .show_60 {
    bottom: 288rpx;
    animation: show_60 0.3s forwards;
  }

  .show_40 {
    bottom: 192rpx;
    animation: show_40 0.3s forwards;
  }

  .show_20 {
    bottom: 96rpx;
    animation: show_20 0.3s forwards;
  }

  @keyframes show_20 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 96rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  @keyframes show_40 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 192rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  @keyframes show_60 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 288rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  @keyframes show_80 {
    from {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }

    to {
      bottom: 384rpx;
      transform: rotate(360deg);
      opacity: 1;
    }
  }

  /* 隐藏动画 */

  .hide_80 {
    bottom: 0;
    animation: hide_80 0.3s;
    opacity: 0;
  }

  .hide_60 {
    bottom: 0;
    animation: hide_60 0.3s;
    opacity: 0;
  }

  .hide_40 {
    bottom: 0;
    animation: hide_40 0.3s;
    opacity: 0;
  }

  .hide_20 {
    bottom: 0;
    animation: hide_20 0.3s;
    opacity: 0;
  }

  @keyframes hide_20 {
    from {
      bottom: 96rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes hide_40 {
    from {
      bottom: 192rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes hide_60 {
    from {
      bottom: 288rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes hide_80 {
    from {
      bottom: 384rpx;
      transform: rotate(360deg);
      opacity: 1;
    }

    to {
      bottom: 0;
      transform: rotate(0deg);
      opacity: 0;
    }
  }
</style>