js window.onresize的使用方法及案例：导航随浏览器宽度改变而控制显示导航个数及箭头按钮的显隐

onresize 事件

onresize 事件会在窗口或框架被调整大小时发生。

最近遇到一个需求：PC站，头部导航，初始只有几条数据，但后来数据增加，分辨率低的小显示器显示不全；

思考：解决这个问题，使用css overflow-x 处理的话，有滚动条，若隐藏滚动条，看不出是左右滑动的效果；

然后想到拖拽，但拖拽需要和进度条结合使用，相比之下，使用swiper并设置其左右箭头按钮，浏览器宽度变化时也控制导航的宽度变化，这样更加简单；

1、下面是没有修改之前的样子：

2、控制宽度：由于该导航与右侧的登录状态，是同一个父级，且右侧的登录状态是position:absolute;定位的，不同浏览器宽度控制导航的宽度，如下：

到此，中间导航的宽度会随着浏览器的缩小而变化，但是多余的数据会被隐藏掉；而且也不能左右滑动；

3、使用swiper2.0布局，并设置左侧翻页按钮，点击时滑动；效果如下图：

js代码：

        var navListW = $("#tabHeader").width();
        var navRightW = $(".v_indexNavRight").width();
        var swiperW = $(".swiper-container").width();
        var wrapperW = 0;
        var num = parseInt((navListW - navRightW) / 100) - 1; //宽度变化时，控制可视范围内的slide个数；
        // 控制头部导航的可视宽度
        $(".swiper-container").css({
            "margin": "0",
            "padding-right": "10px",
            "max-width": navListW - navRightW - 60,
        })
        var mySwiper = new Swiper('.swiper-container', {
            loop: false, //可选选项，开启循环
            slidesPerView: num,
        })
        // 此时wrapper的宽度是每一条slide撑开的，脚本获取到的只是可视的宽度，真正的宽度是每一条slide的宽度之和；
        // 获取swiper-wrapper的总width
        $(".swiper-container .swiper-wrapper .swiper-slide").each(function(index, item) {
            var a = $(this).width();
            wrapperW += a
        })

4、考虑到若浏览器宽度够用时，则无需让箭头出现（先给箭头css样式opacity设置为0；）：

        // 每条slide的宽之和，即wrapper的宽度 >= swiper的可视宽度，那么这时的浏览器宽度是够用的，所以不需要箭头；小于时，则显示箭头；
        // 有隐藏的导航时，显示下拉图标
        if (wrapperW >= swiperW - 60) {
            $(".v_index_gdTeach_swipBtn").css("opacity", "1");
        } else {
            $(".v_index_gdTeach_swipBtn").css("opacity", "0");
        }

此时，浏览器宽度够用，则导航会显示全部，无需显示箭头按钮；若宽度不够，则显示箭头提醒用户可以点击查看更多导航；

以上基本的业务逻辑完成了；

but，页面在每次刷新之后才会加载导航的宽度，再控制按钮的显示及隐藏；手动将浏览器的宽度缩小或者放大，导航按钮没有反应，刷新页面之后，导航才会根据可视的宽度显示按钮；

5、那如何让页面随着浏览器的宽度变化而变化呢？

window.onresize() 会在窗口或框架被调整大小时发生。窗口大小放大缩小时，触发这个函数；

最终代码：

     function navFun() {
        var navListW = $("#tabHeader").width();
        var navRightW = $(".v_indexNavRight").width();
        var swiperW = $(".swiper-container").width();
        var wrapperW = 0;
        var num = parseInt((navListW - navRightW) / 100) - 1; //宽度变化时，控制可视范围内的slide个数；
        // 控制头部导航的可视宽度
        $(".swiper-container").css({
            "margin": "0",
            "padding-right": "10px",
            "max-width": navListW - navRightW - 60,
        })
        var mySwiper = new Swiper('.swiper-container', {
                loop: false, //可选选项，开启循环
                slidesPerView: num,
            })
            // 此时wrapper的宽度是每一条slide撑开的，脚本获取到的只是可视的宽度，真正的宽度是每一条slide的宽度之和；
            // 获取swiper-wrapper的总width
        $(".swiper-container .swiper-wrapper .swiper-slide").each(function(index, item) {
            var a = $(this).width();
            wrapperW += a
        })

        // 有隐藏的导航时，显示下拉图标
        if (wrapperW >= swiperW - 60) {
            $(".v_index_gdTeach_swipBtn").css("opacity", "1");
        } else {
            $(".v_index_gdTeach_swipBtn").css("opacity", "0");
        }

        // 点击下拉，slide滑动
        $('.v_index_gdTeach_swipBtn .right').on('click', function(e) {
            e.preventDefault()
            mySwiper.swipeNext()
        })
    }
    navFun();
    window.onresize = function() {
        navFun();
    };

如有误之处，欢迎讨论。

：）

js window.onresize的使用方法及案例：导航随浏览器宽度改变而控制显示导航个数及箭头按钮的显隐

onresize 事件

猜你喜欢