vue swiper 多于一屏滚动到底再切换

其实就是一个swiper里的slide里再套一个freeMode的swiper，但是有个问题要注意，这个slide必须overflow: auto; 否则效果出不来。

<template>
<div class="mobileBody">
      <swiper
        :options="swiperOption"
        class="big-list"
      >
        <swiper-slide>
            1
        </swiper-slide>
        <swiper-slide>
            2
        </swiper-slide>
        <swiper-slide>
            <swiper
                :options="swiperOption1"
                class="in-list"
          >
                <swiper-slide>
                  <div class="long">
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                    <p>长文字</p>
                   </div>
                </swiper-slide>
            </swiper>
        </swiper-slide>
        <swiper-slide>
            4
        </swiper-slide>
    </swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper.min.css'
export default {
    components: {
        //轮播图组件
        swiper,
        swiperSlide,
    },
    data () {
        return {
            swiperOption: {
                direction: 'vertical',
                autoHeight: true,
                observer: true,
                observeParents: true
            },
            swiperOption1: {
                    autoHeight: true,
                    observer: true,
                    observeParents: true,
                    direction: 'vertical',
                    nested: true,
                    slidesPerView: 'auto',
                    freeMode: true,
                },
                
           }
    }
}
</script>
<style lang="scss">
.big-list>.swiper-wrapper>.swiper-slide {
    height: 100vh;
    background: #ffffff;
    overflow: auto;
}

.big-list p {
    height: 100px;
}

.swiper-container-vertical .swiper-wrapper{
    flex-direction: column;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.in-list .swiper-slide {
    height: auto;
}
</style>