<!-- home -->
<template>
  <div class="home">
      <!--home首页结构-->
      <header class="g-header-container">
        <home-header></home-header>
      </header>
      <!--滚动组件-->
      <me-scroll :num='recommends' pullDown @scroll-end='scrollEnd'>
          <!--导入轮播图组件-->
          <home-slider></home-slider>
          <!--导入导航组件-->
          <home-nav></home-nav>
          <!--导入下方数据-->
          <home-recommend @loaded='getRecommends'></home-recommend> <!--接收子组件传来的值-->
      </me-scroll>

      <div class="g-backtop-container">
          <me-backtop :visible='isBackTopVisible'></me-backtop>
      </div>
      <!--二级路由的路由页面product-->
      <router-view></router-view>
  </div>
  
</template>

<script>
import HomeHeader from './header.vue';
import HomeSlider from './slider.vue';
import MeScroll from 'base/scroll/index.vue';
import HomeNav from './nav.vue';
import HomeRecommend from './recommend.vue';
import MeBacktop from "base/backTop/index.vue";

export default {
    name:'Home',
    components:{
        HomeHeader,
        HomeSlider,
        MeScroll,
        HomeNav,
        HomeRecommend,
        MeBacktop
    },
    data(){
        return{
            recommends:[],  //值发生了改变
            isBackTopVisible:false
        }
    },
    methods:{
        updataScroll(){

        },
        getRecommends(recommends){  //接收从recommend子组件传来的参数，改变data中的recommends[]的值
            this.recommends=recommends;
        },
        scrollEnd(translate,scroll){
            console.log(scroll.height);
            this.isBackTopVisible=translate <0 && -translate > scroll.height;  //下拉并且滑动的距离大于一屏的距离

        }
    }

}

</script>
<style lang="scss" scoped>
@import '~assets/scss/mixins';
    .home{
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: $bgc-theme;
    }
    .g-header-container{
        width: 100%;
    }
</style>

<!-- 返回顶部组件 -->
<template>
<transition name="mine-backtop">
    <a href="###" class="mine-backtop" v-show="visible" @click="backToTop">
        <i class="iconfont icon-backtop" ></i>
    </a>
</transition>
</template>

<script>
export default {
    name:'MeBacktop',
  data () {
    return {
    };
  },
  props:{
      visible:{
          type:Boolean,
          default:false
      }
  },
  methods:{
      backToTop(){
          this.$emit('backtop')
      }
  }

  
}

</script>
<style lang='scss' scoped>

@import '~assets/scss/mixins';

    .mine-backtop{
        overflow: hidden;
        @include flex-center();
        width: 45px;
        height: 45px;
        background-color: rgba(0, 0, 0, .6);
        border: none;
        border-radius: 50%;

        .iconfont{
            color: #fff;
            font-size: 38px;
        }
    }
    .mine-backtop-enter-active,.mine-backtop-leave-active{
        transition: opacity 0.4s;
    }
    .mine-backtop-enter,.mine-backtop-leave-to{
        opacity: 0;
    }
</style>