<template>
  <!-- 返回顶部 -->
  <view class="toTop_M">
      <view class="btn" @tap="toTop" :style="{'display':(toTopFlag === false ? 'none' : 'block')}">
        <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-toTop" size="20" :color="iconColor"></uni-icons>
      </view>
  </view>
</template>

<script>

import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
export default {
  name: "toTop",
  //import引入的组件需要注入到对象中才能使用
  components: {UniIcons},
  //混合封装的属性和方法
  mixins: [],
  //组件传入的属性
  props: {
    toTopFlag: {
      type: Boolean,
      default: false
    },
    toTop: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    //这里存放数据
    return {
      iconColor: '#1a94bc',
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  },
  created() {
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="scss">
.toTop_M {

  .btn {
    position: fixed;
    z-index: 9999;
    right: 32rpx;
    bottom: 200rpx;
    background-color: $uni-white;
    padding: 10rpx;
    display: none;
    border-radius: 10rpx;

  }

  .btn .cuIcon-top {
    font-size: 30px;
    color: #FFFFFF;
  }
}
</style>