Usage methods and cases of js window.onresize: Navigation controls the number of displayed navigations and the display and hiding of arrow buttons as the browser width changes

onresize event

The onresize event occurs when the window or frame is resized.

Recently I encountered a requirement : PC station, head navigation, initially only had a few pieces of data, but later the data increased, and the small monitor with low resolution could not display all the data;

Thinking : To solve this problem, if you use css overflow-x to process it, there will be a scroll bar. If you hide the scroll bar, you will not see the effect of sliding left and right;

           Then I thought of dragging, but dragging needs to be used in conjunction with the progress bar. In contrast, it is simpler to use swiper and set its left and right arrow buttons. When the browser width changes, it also controls the width of the navigation. This is simpler;

 

1. Here is what it looked like before no modifications:

 

2. Control the width: Since the navigation and the login status on the right have the same parent, and the login status on the right is positioned with position:absolute;, different browser widths control the width of the navigation, as follows:

 At this point, the width of the middle navigation will change as the browser shrinks, but redundant data will be hidden; and it cannot slide left or right;

 

3. Use swiper2.0 layout and set the left page turning button to slide when clicked; the effect is as follows:

js code:

        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. Consider that if the browser width is sufficient, there is no need for the arrow to appear (first set the opacity of the arrow css style to 0;):

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

At this time, if the browser width is enough, the navigation will display all navigation without showing arrow buttons; if the width is not enough, arrows will be displayed to remind the user that they can click to view more navigation;

 

The above basic business logic is completed;

But, the page will only load the navigation width after each refresh, and then control the display and hiding of the buttons; manually reduce or enlarge the width of the browser, the navigation buttons will not respond. After refreshing the page, the navigation will be based on the visible width. Show button;

5. How to make the page change as the width of the browser changes?

window.onresize() occurs when the window or frame is resized. This function is triggered when the window size is enlarged or reduced;

Final code:

     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();
    };

 

 

If there are any errors, please discuss them.

：）

：）