无法垂直滚动，update是有触发的，但是触发前后的高度是一样的……

<template>
  <div class="home">
    <header class="g-header-container">
      <home-header></home-header>
    </header>
    <me-scroll :data="recommends">
      <home-slider />
      <home-nav />
      <home-recommend @loaded="getRecommends" />
    </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';
  import HomeNav from './nav';
  import HomeRecommend from './recommend';

  export default {
    name: 'Home',
    components: {
      HomeHeader,
      HomeSlider,
      MeScroll,
      HomeNav,
      HomeRecommend
    },
    data() {
      return {
        recommends: []
      };
    },
    methods: {
      getRecommends(recommends) {
        this.recommends = recommends;
      },
      updateScroll() {

      }
    }
  };

</script>

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

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

</style>


<!-- 组件说明 -->
<template>
  <div class='recommend'>
    <h3 class="recommend-title">热卖推荐</h3>
    <div class="loading-container" v-if="!recommends.length">
      <me-loading inline />
    </div>
    <ul class="recommend-list" v-if="recommends.length">
      <li class="recommend-item" v-for="(item,index) in recommends" :key=index>
        <router-link class="recommend-link" :to="{name:'home-product',params:{id:item.baseinfo.itemId}}">
          <p class="recommend-pic"><img class="recommend-img" :src="item.baseinfo.picUrlNew"></p>
          <p class="recommend-name">{{item.name.shortName}}</p>
          <p class="recommend-origPrice"><del>¥{{item.price.origPrice}}</del></p>
          <p class="recommend-info">
            <span class="recommend-price">¥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
            <span class="recommend-count">{{item.remind.soldCount}}件已售</span>
          </p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import {
    getHomeRecommend
  } from 'api/home';
  import MeLoading from 'base/loading';

  export default {
    name: 'HomeRecommend',
    components: {
      MeLoading
    },
    data() {
      return {
        recommends: [],
        curPage: 1,
        totalpage: 1
      };
    },
    methods: {
      updata() {
        return this.getRecommend();
      },
      getRecommend() {
        if (this.curPage > this.totalpage) {
          return Promise.reject(new Error('没有更多了'));
        }
        getHomeRecommend(this.curPage).then(data => {
          return new Promise(resolve => {
            if (data) {
              this.curPage++;
              this.totalpage = data.totalPage;
              this.recommends = this.recommends.concat(data.itemList);
              this.$emit('loaded', this.recommends);
              resolve();
            }
          })
        });
      }
    },
    created() {
      this.getRecommend();
    }
  }

</script>

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

  .recommend {
    &-title {
      position: relative;
      width: 100%;
      padding: 10px 0;
      font-size: $font-size-l;
      text-align: center;

      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background-color: #ddd;
      }

      &:before {
        left: 0;
      }

      &:after {
        right: 0;
      }
    }

    &-list {
      @include flex-between();
      flex-wrap: wrap;
    }

    &-item {
      width: 49%;
      background-color: #fff;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
      margin-bottom: 8px;
    }

    &-link {
      display: block;
    }

    &-pic {
      position: relative;
      width: 100%;
      padding-top: 100%;
      margin-bottom: 5px;
    }

    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &-name {
      height: 36px;
      padding: 0 5px;
      margin-bottom: 8px;
      line-height: 1.5;
      @include multiline-ellipsis();
    }

    &-origPrice {
      padding: 0 5px;
      margin-bottom: 8px;
      color: #ccc;
    }

    &-info {
      @include flex-between();
      padding: 0 5px;
      margin-bottom: 8px;
    }

    &-price {
      color: #e61414;
    }

    &-price-num {
      font-size: 20px;
    }

    &-count {
      color: #999;
    }
  }

  .loading-container {
    padding-top: 100px;
  }

</style>


<!-- 组件说明 -->
<template>
  <swiper :options='swiperOption' ref="mySwiper">
    <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: {
      swiperSlide,
      swiper
    },
    props: {
      scrollbar: {
        type: Boolean,
        default: true
      },
      data: {
        type: [Array, Object]
      }
    },
    data() {
      return {
        swiperOption: {
          direction: 'vertical',
          sliderPerView: 'auto',
          freeMode: true,
          setWrapperSize: true,
          scrollbar: {
            el: this.scrollbar ? '.swiper-scrollbar' : null,
            hide: true
          }
        }
      };
    },
    watch: {
      data() {
        this.update();
      }
    },
    mounted() {
      console.log(this.$refs.mySwiper.swiper.height);

    },
    methods: {
      update() {
        console.log(this.data);
        console.log(this.$refs.mySwiper.swiper.$wrapperEl.css('height'));
        setTimeout(() => {
          this.$refs.mySwiper && this.$refs.mySwiper.swiper.update();
          console.log(this.$refs.mySwiper.swiper.$wrapperEl.css('height'));
        }, 8000);
      }
    }
  }

</script>

<style lang='scss' scoped>
  .swiper-container {
    overflow: hidaden;
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    height: auto;
  }

</style>