上下滑动的swiper,第二个slider高度大于屏幕,如何让它出现滚动条,像单页面那样滑动??

miconiu
  • 65

上下滑动的swiper,有两页,第二个slider是列表页,内容会超出屏幕高度,现在的问题是,超出部分无法通过滚动条下滑查看。

想要的效果是,第二页slider不受影响,出现滚动体爱,正常下滑查看内容。

(如果禁用swiper某个方向的移动,会导致无法滑动到上一页)

回复
阅读 12.6k
3 个回答
kimozhang
  • 80
✓ 已被采纳
<style>
html, body {
    height: 100%;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-container-scrollbar .swiper-slide {
    height: auto;
}
</style>

<div class="swiper-container swiper-container-v">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Vertical Slide 1</div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-scrollbar">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <h3>title</h3>
                        <p>this is a p tag</p>
                        .....
                        .....
                        .....
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <div class="swiper-slide">Vertical Slide 3</div>
        <div class="swiper-slide">Vertical Slide 4</div>
    </div>
</div>

<script>
var swiperV = new Swiper('.swiper-container-v', {
    direction: 'vertical'
})

var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
    scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
    direction: 'vertical',
    slidesPerView: 'auto',
    mousewheelControl: true,
    freeMode: true,
    nested: true
})
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏