<!--回到顶部按钮
-->
<script>
export default {
  name: "my-top-button",
  data(){
    return{
      topFlag:false
    }
  },
  methods: {
    top() { //回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
  },
  onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  }
}
</script>

<template>
  <view class="top" style="transition: 0.3s;" :style="{'display':(topFlag===true? 'block':'none')}">
    <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons>
  </view>
</template>

<style scoped lang="scss">

</style>
