仿app首页切换效果.gif
首先讲一下这个页面包含的功能，分为头部banner和主体view部分，头部bannner是可以滚动并且切换居中，头部banner和主体view部分互相影响有一个联动的效果，每个主体部分还有各自的轮播图。
这里主要使用了一个 swiper插件实现这个功能，功能拆分来看其实很简单，就是swiper插件的排列组合。
这个我觉得大家都会想到，我做的这个自己比较满意的是头部banner切换时的居中效果，我发现一般app实现了这个效果，但对应的H5却没有，一般都是切换跟随移动一定距离。
这个头部banner的切换效果我做了两种，其一：当某一个slide在边上被压住点击时会移动一定距离，使slide完全展示出来。其二就是现在动图中的居中展示效果。
第一种.jpg
页面切换实现
因为是整体轮播，所以先设置了一个宽高为屏幕视口宽高的swiper，在页面顶部设置一个banner轮播，然后使其关联起来，在头部swiper注册一个click事件监听，在主体的swiper注册一个slideChangeTransitionEnd事件监听，关键代码如下：
// 头部导航轮播
var shead = new Swiper('#shead', {
slidesPerView: 'auto',
speed:500,
on: {
click: function() {
$("#shead .swiper-slide").removeClass("headactive");
$("#shead .swiper-slide").eq(this.clickedIndex).addClass("headactive");
sbody.slideTo(this.clickedIndex, 10, false);
slidecenter(this.clickedIndex);
}
}
});
// 主体轮播部分
var sbody = new Swiper('#sbody', {
on: {
slideChangeTransitionEnd: function() {
shead.slideTo(sbody.activeIndex, 500, false);
$("#shead .swiper-slide").removeClass("headactive");
$("#shead .swiper-slide").eq(sbody.activeIndex).addClass("headactive");
slidecenter(sbody.activeIndex);
}
}
});
导航条切换居中实现
主要有以下两点：
- 以判断如果要居中偏移量是多少；
- 判断元素是否在可以移动到中心位置的距离范围内。
function slidecenter(clickedIndex) {
var onheadactive = $(".headactive").offset().left;//选中元素距离视口的距离
var hweight = $(".headactive").width();//元素的宽度
var winweight = $(window).width()/2;//屏幕宽度的一半
var indexnum = clickedIndex+1;//当前选中的index
var distance = indexnum*hweight-(hweight/2);//选中元素中点距离开始点的距离
var slidenum = $(".shead .swiper-slide").length;
//判断在屏幕的右边：选中元素中点距离视口的距离大于屏幕宽度一半
//判断元素在可以移动到中心位置的距离范围内：全部元素的宽度-选中元素中点距离开始点的距离大于屏幕宽度一半
if(onheadactive+hweight/2>winweight && (slidenum*hweight-distance )>winweight){
//console.log("左移");
shead.setTransition(500);
shead.setTranslate(winweight-distance );
}else if(onheadactive+hweight/2<winweight && distance >winweight){
//console.log("右移");
shead.setTransition(500);
shead.setTranslate(winweight-distance );
}else if(onheadactive+hweight/2>winweight){
//console.log("左移");
// shead.slideTo(this.clickedIndex, 500, false);
shead.setTransition(500);
shead.setTranslate(-slidenum*hweight+2*winweight);
}else if(onheadactive+hweight/2<winweight){
//console.log("右移");
shead.setTransition(500);
shead.setTranslate(0);
}
}
tips：避免多个swiper互相影响问题
类名和分页器名一定要分开
var swiper1 = new Swiper('.swiper-container1', {
pagination: '.swiper-pagination1',
});
var swiper2 = new Swiper('.swiper-container2', {
pagination: '.swiper-pagination2',
});
完善ing....
