• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  swiper中的swiper-slide内正文

swiper中的swiper-slide内容超出滚动显示

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-12-21 10:29
分享到:
    我爱模板网在做一个智能景观APP的时候,需要做类似抖音的整屏上下滑动的效果,如下图:

swiper

    但是数据太多,单个swiper-slide的内容一屏显示不下,这时,简单的overflow-y:scroll解决不了,因为它肯定要滑动,与swiper的滑动冲突,就要再将swiper-slide里面再套个swiper,并且使用它的滚动条效果了,代码大致如下:

HTML:
<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>
CSS:
html, body{
    height: 100%;
}
.swiper-container{
    width: 100%;
    height: 100%;
}
.swiper-container-scrollbar .swiper-slide{
    height: auto;
}
JavaScript:
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
});
点击查看 swiper单个swiper-slide内容超出滚动效果。 (责任编辑:网页模板)
  • 本文标签:
  • swiper
在H5里调起高德地图APP并且调起高德地图的路线规划功能
JS数组reduce()方法详解