导航栏 和 内容块互相联动切换效果

<div class="msgNavBar">
    <div class="swiper-container scroll-nav" id="nav">
        <div class="swiper-wrapper nav-list">
        </div>
    </div>
</div>
<div class="msgNavBar_container">
    <div class="swiper-container" id="page">
        <div class="swiper-wrapper nav-thumb ">
            <div class="swiper-slide">
            ...
            </div>
        </div>
    </div>
</div>
复制代码

$('#nav .nav-list').navBarScroll(
    data = [
        {id: 0, pid: 0, name: "选项1", title: "选项1"},
        {id: 1, pid: 1, name: "选项2", title: "选项2"},
        {id: 2, pid: 2, name: "选项3", title: "选项3"},
        {id: 3, pid: 3, name: "选项4", title: "选项4"},
        {id: 4, pid: 4, name: "选项5", title: "选项5"},
        {id: 5, pid: 5, name: "选项6", title: "选项6"},
    ],
    scrollName = '#nav',   // 传当前导航栏 id值做唯一标识
    pageName = '#page',   // 传当前导航栏对应页面 id值做唯一标识
    index = '0'   // 传当前导航栏对应页面 id值做唯一标识
);
复制代码

;
(function($){
    $.fn.navBarScroll = function(data,scrollName,pageName,index){
        var scrollName = scrollName; // 传当前导航栏 id值做唯一标识
        var pageName = pageName; // 传当前导航栏对应页面 id值做唯一标识
    
        

        //动态获取导航数据
        // get_menu()
        function get_menu() {
            $.ajax({
                type: 'get',
                url: '',
                dataType: 'json',
                data: {},
                success: function (data) {
                    var str = '';
                    if (data.error_code === 0) {
                        $.each(data.data, function (k, v) {
                            v.cate_name = v.name.substring(0, 2);
                            if (k === 0) {
                                str += ' <div class="swiper-slide nav-a selected" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                            } else {
                                str += ' <div class="swiper-slide nav-a" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                            }
                        
                        });
                        str += ' <div class="bar"><div class="color"></div></div>';
                        $('#nav .swiper-wrapper').html(str);
                    }
                    
                }
            });
        }
      
        get();
        function get() {
            var str = '';
            $.each(data,function (k, v) {
                if (k === 0) {
                    str += ' <div class="swiper-slide nav-a navBar_item active" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                } else {
                    str += ' <div class="swiper-slide nav-a navBar_item" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                }
            
            });
            str += '<div class="bar"><div class="color"></div></div>';
            $(scrollName + ' .swiper-wrapper').html(str);
        }
        var lodW = ($(scrollName +' .nav-a.active').outerWidth(true)-$(scrollName + ' .bar').width())/2;

        $(scrollName + ' .bar').css({"transition-duration": "100ms", "transform": "translateX(" + lodW + "px)"});

        // 初始化跳转到指定下标
        function gotoPage(){
            var moveX = $(scrollName + ' .nav-a').eq(index).position().left + $(scrollName + ' .nav-a').eq(index).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(scrollName + ' .nav-a').eq(index).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(scrollName + " .nav-list").animate({
                scrollLeft: left,
            });
            $(scrollName + " .nav-a").removeClass("active");
            $(scrollName + ' .nav-a').eq(index).addClass("active");
            var cate_index = $(scrollName + ' .nav-a').eq(index).prevAll().length;
            var nowItemW = $(scrollName + ' .nav-a').eq(index).outerWidth(true);
            
            var pxs = 0;
            for(let i=0;i<=cate_index;i++){
                pxs += parseInt($(scrollName + ' .nav-a').eq(i).outerWidth(true));
                // 移动距离 = 当前元素前面所有元素的宽度总合 - 当前元素的宽度
            
                $(scrollName + ' .bar').css({"width":nowItemW,"transition-duration": "100ms", "transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }
            myPage.slideTo(index, 300, false);
        }
        // 加定时器是因为页面加载会有延迟
        setTimeout(function(){
            gotoPage()
        },100)



        //点击导航高亮
        $(scrollName).on("click", '.nav-a', function () {
            var moveX = $(this).position().left + $(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(scrollName + " .nav-list").animate({
                scrollLeft: left,
            });
            $(scrollName + " .nav-a").removeClass("active");
            $(this).addClass("active");
            var cate_index = $(this).prevAll().length;
            var nowItemW = $(this).outerWidth(true);
            
            var pxs = 0;
            for(let i=0;i<=cate_index;i++){
                pxs += parseInt($(scrollName + ' .nav-a').eq(i).outerWidth(true));
                // 移动距离 = 当前元素前面所有元素的宽度总合 - 当前元素的宽度
            
                $(scrollName + ' .bar').css({"width":nowItemW,"transition-duration": "100ms", "transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }
            myPage.slideTo($(this).index(), 300, false);
        });

        var myPage = new Swiper(pageName,{
            observer:true,
            observeSlideChildren:true,
            autoHeight: true,
            on:{
                slideChangeTransitionStart: function(){
                    updateNavPosition();
                }
            }
        })
        function updateNavPosition(){
            $(scrollName + ' .swiper-slide').eq(myPage.activeIndex).addClass('active').siblings().removeClass('active');
          
            var moveX = $(scrollName + ' .nav-a').eq(myPage.activeIndex).position().left + $(scrollName + ' .nav-a').eq(myPage.activeIndex).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(scrollName + ' .nav-a').eq(myPage.activeIndex).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(scrollName + " .nav-list").animate({
                scrollLeft: left,
            });

            var cate_index = $(scrollName + ' .swiper-slide.active').prevAll().length;
            var nowItemW = $(scrollName + ' .swiper-slide.active').outerWidth(true);
            var pxs = 0;
            for(let i=0;i<=cate_index;i++){
                pxs += parseInt($(scrollName + ' .nav-a').eq(i).outerWidth(true));
                $(scrollName + ' .bar').css({"width":nowItemW,"transition-duration": "100ms", "transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }
        }
    }
    
})(jQuery);
复制代码