java-mall-app/components/quick-nav.vue

<template name="quick-nav">
  <view :class="[animation ? '' : 'zhezhaoceng']">
    <movable-area class="movableArea">
      <movable-view
        class="movableView"
        @touchmove.stop.prevent="doNothing"
        direction="all"
        :x="initX"
        :y="initY"
      >
        <view class="u-top1" v-if="isnav">
          <image
            v-if="false"
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/black/nav_icon_nav.png"
            class="quicknav"
            @click="nav"
          ></image>
          <image
            src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/black/nav_gotop.png"
            :class="[!isquicknav ? 'hide' : 'quicknav']"
            @click="returnTop"
          ></image>
        </view>
        <view v-else @click="outnav">
          <view class="u-top1">
            <navigator
              :class="[animation ? 'navtext1' : 'navtext']"
              url="/pages/index/member"
              open-type="switchTab"
              ><text>{{ __("个人中心") }}</text>
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/gray/nav_usercenter.png"
                class="quicknav"
              ></image>
            </navigator>

            <navigator
              :class="[animation ? 'navtext1' : 'navtext']"
              url="/member/member/favorites"
              ><text>{{ __("我的收藏") }}</text>
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/gray/nav_my_favor.png"
                class="quicknav"
              ></image>
            </navigator>
            <!-- #ifndef H5 -->
            <view
              :class="[animation ? 'navtext1' : 'navtext']"
              @click="shareBox"
              ><text>{{ __("分享") }}</text>
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/gray/nav_share.png"
                class="quicknav"
              ></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view
              :class="[animation ? 'navtext1' : 'navtext']"
              @click="shareBoxPoster"
              ><text>{{ __("生成海报") }}</text>
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/gray/nav_share.png"
                class="quicknav"
              ></image>
            </view>
            <!-- #endif -->
            <navigator
              :class="[animation ? 'navtext1' : 'navtext']"
              url="/pages/index/index"
              open-type="switchTab"
            >
              <text>{{ __("首页") }}</text>
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/gray/nav_home.png"
                class="quicknav"
              ></image>
            </navigator>
            <view class="open-nav"
              ><text></text>
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/nav/black/nav_icon_close.png"
                class="quicknav"
              ></image>
            </view>
          </view>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  name: "quick-nav",
  props: {
    isquicknav: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isnav: true,
      animation: true,
      initX: "690",
      initY: "1336",
    };
  },

  mounted() {
    let view = uni.createSelectorQuery().in(this).select(".movableArea");
    let that = this;

    view
      .fields(
        {
          size: true,
          scrollOffset: true,
        },
        (data) => {
          if (data) {
            that.setData({
              initX: data.width,
              initY: data.height - 100,
            });
          }
        }
      )
      .exec();
  },

  methods: {
    shareBox: function () {
      this.$emit("onShareBox", 3);
    },

    shareBoxPoster: function () {
      this.$emit("onShareBox", 3);
    },

    returnTop: function () {
      this.$emit("onReturnTop");
    },
    doNothing: function () {},
    nav: function () {
      this.setData({
        isnav: false,
        animation: false,
      });
    },
    outnav: function () {
      var that = this;
      this.setData({
        animation: true,
      });

      setTimeout(function () {
        that.setData({
          isnav: true,
        });
      }, 250);
    },
  },
};
</script>


<style lang="scss">
@import "../styles/_variables.scss";

/* 快捷导航 */
.u-tap-btn {
  position: fixed;
  right: 20rpx;
  bottom: 100rpx;
  z-index: 999;
}

.u-go-home {
  border-radius: 100%;
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #eee;
  font-size: 20rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
  z-index: 2;
  opacity: 0.8;
  line-height: 80rpx;
  margin-bottom: 20rpx;
}

.u-go-home .iconfont {
  font-size: 36rpx;
}

.zhezhaoceng {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  animation: opacity 500ms;
  animation-fill-mode: forwards;
}

@keyframes opacity {
  from {
    background: rgba(0, 0, 0, 0);
  }

  to {
    background: rgba(0, 0, 0, 0.4);
  }
}

@keyframes opacity1 {
  from {
    background: rgba(0, 0, 0, 0.4);
  }

  to {
    background: rgba(0, 0, 0, 0);
  }
}

.quicknav {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

@keyframes mymove1 {
  from {
    bottom: 0rpx;
    opacity: 0;
  }

  to {
    bottom: 420rpx;
    opacity: 1;
  }
}

@keyframes mymove2 {
  from {
    bottom: 0rpx;
    opacity: 0;
  }

  to {
    bottom: 320rpx;
    opacity: 1;
  }
}

@keyframes mymove3 {
  from {
    bottom: 0rpx;
    opacity: 0;
  }

  to {
    bottom: 220rpx;
    opacity: 1;
  }
}

@keyframes mymove4 {
  from {
    bottom: 0rpx;
    opacity: 0;
  }

  to {
    bottom: 120rpx;
    opacity: 1;
  }
}

@keyframes mymove5 {
  from {
    bottom: 420rpx;
    opacity: 1;
  }

  to {
    bottom: 10rpx;
  }
}

@keyframes mymove6 {
  from {
    bottom: 320rpx;
    opacity: 1;
  }

  to {
    bottom: 10rpx;
    opacity: 0;
  }
}

@keyframes mymove7 {
  from {
    bottom: 220rpx;
    opacity: 1;
  }

  to {
    bottom: 10rpx;
    opacity: 0;
  }
}

@keyframes mymove8 {
  from {
    bottom: 120rpx;
    opacity: 1;
  }

  to {
    bottom: 10rpx;
    opacity: 0;
  }
}

.navtext text {
  font-size: 24rpx;
  color: #fff;
  text-align: right;
  min-width: 120rpx;
  margin-right: 20rpx;
}

.navtext1 text {
  font-size: 24rpx;
  color: #fff;
  text-align: right;
  min-width: 120rpx;
  margin-right: 20rpx;
}

.u-tuan-label {
  padding: 5rpx 8rpx;
  background-color: #db384c;
  border-radius: 4rpx;
  font-size: 24rpx;
  color: #fff;
  margin-right: 8rpx;
}

.m-product-name2 {
  font-size: 28rpx;
  box-sizing: border-box;
  padding-right: 20rpx;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.m-listv .m-product-name2 {
  width: 345rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>