<!-- 悬浮按钮滚动到顶部 -->
<template>
  <view :animation="animationData" hover-class="bottom-btn-hover" class="to-top" @tap="tapTop">
    <i class="iconfont icon-back-top-line" />
    <text>顶部</text>
  </view>
</template>

<script>
let animation = uni.createAnimation({
  timingFunction: "ease"
});
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: {
    //滚动到顶部
    tapTop() {
      this.$emit("toTop");
    }
  }
};
</script>

<style scoped lang="scss">
.to-top {
  position: fixed;
  right: 20rpx;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50rpx;
  border: 1rpx solid #ebebeb;
  display: flex;
  flex-direction: column;
  bottom: 218rpx;
  font-size: 20rpx;
  color: #666666;
  align-items: center;
  z-index: 100;
  .icon-top {
    font-size: 36rpx;
  }
}
</style>
