<!-- 悬浮按钮滚动到顶部 -->
<template>
  <transition name="fade">
    <view v-if="scrollTop > 500" class="to-top" @click="handleTop">
      <!-- <i class="iconfont back-top-o" /> -->
      <cr-icon type="back-top-o" size="20px" style="font-weight: bold" />
      <span>顶部</span>
    </view>
  </transition>
</template>

<script>
export default {
  props: {
    // 页面滚动距离
    scrollTop: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // animationData: {},
      old: {
        scrollTop: 0
      }
    };
  },
  watch: {
    scrollTop(newVal) {
      this.old.scrollTop = newVal;
      if (newVal < 500) {
        //淡出
        // animation.opacity(0).step({ duration: 800 });
        // this.animationData = animation.export();
      } else {
        //淡入
        // animation.opacity(1).step({ duration: 800 }); //描述动画
        // this.animationData = animation.export();
      }
    }
  },
  created() {
    //默认不显示
    // animation.opacity(0).step({ duration: 0 });
    // this.animationData = animation.export();
  },

  methods: {
    //滚动到顶部
    handleTop() {
      this.$emit('toTop');
    }
  }
};
</script>

<style scoped lang="less">
.to-top {
  position: fixed;
  right: 10px;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: @white;
  border-radius: @border-radius-max;
  border: 1px solid @gray-2;
  display: flex;
  flex-direction: column;
  bottom: 69px;
  .text-size(10);
  color: @gray-5;
  align-items: center;
  .icon-top {
    .text-size(18);
  }
}
</style>
