yunshangxie/libs/components/nav-index-button.vue

<template>
  <view class="nav-index-button" :style="{bottom: `${bottom}rpx`, right: `${right}rpx`}" @tap.stop="navIndex">
    <view class="nav-index-button__content">
        <view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-7">
          <view class="tn-icon-home-vertical-fill"></view>
        </view>  
    </view>
  
    <view class="nav-index-button__meteor">
      <view class="nav-index-button__meteor__wrapper">
        <view v-for="(item,index) in 6" :key="index" class="nav-index-button__meteor__item" :style="{transform: `rotateX(${-60 + (30 * index)}deg) rotateZ(${-60 + (30 * index)}deg)`}">
          <view class="nav-index-button__meteor__item--pic"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'nav-index-button',
    props: {
      // 距离底部的距离
      bottom: {
        type: [Number, String],
        default: 300
      },
      // 距离右边的距离
      right: {
        type: [Number, String],
        default: 75
      },
      // 首页地址
      indexPath: {
        type: String,
        default: '/pages/index/index'
      }
    },
    methods: {
      // 跳转回首页
      navIndex() {
        // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
        const pages = getCurrentPages()
        if (pages && pages.length > 0) {
          const indexPath = this.indexPath || '/pages/index/index'
          const firstPage = pages[0]
          if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
            uni.reLaunch({
              url: indexPath
            })
          } else {
            uni.navigateBack({
              delta: 1
            })
          }
        } else {
          uni.reLaunch({
            url: indexPath
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .nav-index-button {
    position: fixed;
    animation: suspension 3s ease-in-out infinite;
    z-index: 999999;
    
    &__content {
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        transform: scale(0.85);
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
        }
      }
    }
    
    &__meteor {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100rpx;
      height: 100rpx;
      transform-style: preserve-3d;
      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
      
      &__wrapper {
        width: 100rpx;
        height: 100rpx;
        transform-style: preserve-3d;
        animation: spin 20s linear infinite;
      }
      
      &__item {
        position: absolute;
        width: 100rpx;
        height: 100rpx;
        border-radius: 1000rpx;
        left: 0;
        top: 0;
        
        &--pic {
          display: block;
          width: 100%;
          height: 100%;
          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
          background-size: 100% 100%;
          animation: arc 4s linear infinite;
        }
      }
    }
  }
  
  
  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotateX(0deg);
    }
  
    100% {
      transform: rotateX(-360deg);
    }
  }
  
  @keyframes arc {
    to {
      transform: rotate(360deg);
    }
  }
</style>