工作遇到的一个需求,使用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(); 为项目中最后一页的高度
}