H5仿app导航条切换居中效果及页面切换效果

仿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);

        }
    }
});

导航条切换居中实现

主要有以下两点：

1. 以判断如果要居中偏移量是多少；
2. 判断元素是否在可以移动到中心位置的距离范围内。

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/2winweight){
        //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

tips：避免多个swiper互相影响问题

类名和分页器名一定要分开

var swiper1 = new Swiper('.swiper-container1', {
        pagination: '.swiper-pagination1',
    });

var swiper2 = new Swiper('.swiper-container2', {
        pagination: '.swiper-pagination2',
    });

完善ing....