<template>
  <div class="home">
    <header class="g-header-container">
      <home-header></home-header>
    </header>
    <me-scroll>
      <home-slider></home-slider>
      <home-slider></home-slider>
      <home-slider></home-slider>
      <home-slider></home-slider>
      <home-slider></home-slider>
      <home-slider></home-slider>
      <home-slider></home-slider>
      <home-slider></home-slider>
    </me-scroll>
    <div class="g-backtop-container"></div>
    <router-view></router-view>
  </div>
</template>

<script>
  import HomeHeader from './header'
  import HomeSlider from './slider'
  import MeScroll from 'base/scroll'

  export default {
    name: 'Home',
    components: {
      HomeHeader,
      HomeSlider,
      MeScroll
    }
  }
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";

  .home {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: $bgc-theme;
  }
</style>

<template>
  <swiper :options="swiperOption">
    <swiper-slide>
      <slot></slot>
    </swiper-slide>
    <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
    export default {
      name: "MeScroll",
      components: {
        swiper,
        swiperSlide
      },
      props: {
        scrollbar: {
          type: Boolean,
          default: true
        }
      },
      data() {
        return {
          swiperOption: {
            direction: 'vertical',
            slidesPerView: 'auto',
            freeMode: true,
            setWrapperSize: true,
            scrollbar: {
              el: this.scrollbar ? '.swiper-scrollbar' : null,
              hide: true
            },
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  .swiper-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .swiper-slide{
    height:auto;
  }
</style>

滚动条没有出现，不知道为啥这里的高度设置100%没有任何效果