swiper最后一页内容不全时不进行全屏滚动

工作遇到的一个需求,使用swiper全屏滚动页面,最后一页内容不全,只有一半屏幕的内容时不进行全屏滚动,只滚动到内容结束的位置。解决方法如下:

var activeMaxPage = 5; // 总页码

/* full page swiper */
var swiperBox = new Swiper('.swiper-container-body', {
    pagination: '.swiper-pagination-body',
    paginationClickable : true,
    mousewheelControl : true,
    direction : 'vertical',
    noSwiping : true,
    onTransitionEnd : function(e) {
        if(e.activeIndex == activeMaxPage){ // 是否最后一页
            swiperBox.lockSwipeToNext();
            setSwiperBottom(e);
        }else{
            swiperBox.unlockSwipeToNext();
        }
    },
    onReachEnd: function(e){
        setSwiperBottom(e);
    }
});


function setSwiperBottom(e){
    swiperBox.setWrapperTransition(300);
    swiperBox.setWrapperTranslate(-e.height * (activeMaxPage - 1)-$("#footer").outerHeight()); 
    // 偏移量 最后一页内容不足时不再滚动全屏
    // $("#footer").outerHeight(); 为项目中最后一页的高度
}

猜你喜欢

发表评论

最新发布