JS implements sliding up and down on the mobile terminal one screen at a time

This article shares with you the specific code of JS to achieve the mobile terminal sliding up and down one screen at a time for your reference. The specific content is as follows

The functions are as follows:

Header: Switch between Nearby, Follow, and Recommended tabs
Left and right sliding function, head tab follows animation
Swipe up and down to swipe the screen, and refresh when you swipe past the top of the screen
Double click the tab to return to the top

Above code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -moz-user-select: none;
            /* Firefox */
            -webkit-user-select: none;
            /*webkit browser*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /* Early browsers */
            user-select: none;
        }

        #box {
            width: 350px;
            height: 500px;
            margin: 30px auto;
            border-radius: 5px;
            box-shadow: 0px 0px 27px -3px red;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            overflow: hidden;
            position: relative;
            background-color: #ccc;
        }

        .childbox {
            width: 300%;
            height: 100%;
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
        }

        .childbox>div {
            flex: 1;
            height: 100%;
        }

        .child1 {
            background-color: salmon;
        }

        .child2 {
            background-color: greenyellow;
        }

        .child3 {
            background-color: blueviolet;
        }

        .nav_box {
            position: absolute;
            width: 100%;
            text-align: center;
            line-height: 50px;
        }

        .nav_box div {
            display: inline-block;
            color: #fff;
            margin: 0 5px;
            position: relative;
        }

        .active_nav::before {
            content: '';
            position: absolute;
            background-color: #fff;
            left: 2px;
            bottom: 7px;
            width: 27px;
            height: 2px;
        }

        .childbox>div {
            position: relative;
        }

        .childbox>div .listview {
            width: 100%;
            position: absolute;
        }

        .view_child {
            text-align: center;
            line-height: 200px;
            color: #fff;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="childbox">
            <div class="child1">
                <div class="listview" type="near">

                </div>
            </div>
            <div class="child2">
                <div class="listview" type="Follow">

                </div>
            </div>
            <div class="child3">
                <div class="listview" type="recommend">

                </div>
            </div>
        </div>
        <div class="nav_box">
            <div>Nearby</div>
            <div>Follow</div>
            <div class="active_nav">Recommendations</div>
        </div>
    </div>
</body>
<script>

    //Get the animation box let childbox = document.querySelector('.childbox')
    //Get the height of the screen let viewheight = document.querySelector('#box').offsetHeight
    //Get all navigation let childnav = document.querySelector('.nav_box').querySelectorAll('div')
    //Get the video type box let viewlist = document.querySelectorAll('.listview')
    //Navigation index (0, nearby, 1, attention, 2 recommended)
    let indextype = 2
    //Index of video playback (0: Nearby, 1: Follow, 2: Recommended) [subscript, number of videos, page number]
    let view_index = {
        0: [0, 0, 1],
        1: [0, 0, 1],
        2: [0, 0, 1]
    }
    //Initialize navigation set_nav_active(indextype)
    //Navigation selected state function set_nav_active(index) {
        // Clear the selected state for (let i = 0; i < childnav.length; i++) {
            childnav[i].className = ''
        }
        //Add value to the selected childnav[index].className = 'active_nav'
        //Change the box position childbox.style.left = index * -100 + '%'
    }
    //Add click event to navigation for (let i = 0; i < childnav.length; i++) {
        childnav[i].onclick = function () {
            //Add transition animation childbox.style.transition = 'all 0.5s'
            //Change click navigation status indextype = i
            set_nav_active(indextype)
        }
    }
    //Slide left and right let box = document.querySelector('#box')
    //Whether the animation is finished let transition_status = true
    //Press box.onmousedown = function (event) {
        //Determine whether the animation can be executed if (!transition_status) {
            return
        }
        //Get the coordinate value let startY = event.clientY
        let startX = event.clientX
        //Whether to proceed to judgment let t_l_type = true
        //Get the state of up-down or left-right sliding (0: no movement; 1: left-right; 2: up-down)
        let move_type = 0
        //Record animation behavior (1: pull down, 2: up and down, 3: left and right, 0: no movement)
        let transition_type = 0
        // Left and right start
        // Clear box animation childbox.style.transition = ''
        //Get the left position of the box let startleft = childbox.offsetLeft
        //Whether to switch sliding let type = {
            a: false,
            b: ''
        }
        //left and right over
        //Slide up and down //Initialization position of sliding let startTop = viewlist[indextype].offsetTop
        //Judge whether to switch let top_type_view = {
            a: false, //Switch or not b: '', //Judge whether to switch up or down}
        console.log(startTop)
        //Up and down
        //Pull down to refresh //Clear animation viewlist[indextype].style.transition = '';
        //Record the pull-down distance let b_top = 0
        //Pull down over
        document.onmousemove = function (event) {
            //Get the coordinates when moving let moveY = event.clientY
            let moveX = event.clientX
            //Add a switch to determine whether to add a switch if (t_l_type) {
                //Judge whether to slide left or right or up or down if (Math.abs(moveY - startY) > 5) {
                    //Stop the next judgment t_l_type = false
                    //Record sliding status move_type = 2
                }
                if (Math.abs(moveX - startX) > 5) {
                    //Stop the next judgment t_l_type = false
                    //Record sliding status move_type = 1
                }
            }
            //Judge the sliding code if (move_type == 2) {
                // Pulling down requires two conditions 1. There is nothing on the pull-down 2 if (view_index[indextype][0] == 0 && moveY - startY > 0) {
                    console.log('pull down')
                    //Change animation state transition_type = 1
                    //Calculate the pull-down distance b_top = moveY - startY
                    // Pull the view box viewlist[indextype].style.top = b_top + 'px'
                    return
                }
                //Execute up and down sliding //Refuse to slide up and down when pulling down if (transition_type != 1) {
                    //Change animation state transition_type = 2
                    //Moving position let moveY = event.clientY
                    //Calculate the distance to move up and down let num = moveY - startY
                    //Change the top value of the drag element viewlist[indextype].style.top = startTop + num + 'px'
                    //Judge whether to switch if (num > 70) {
                        top_type_view.a = true
                        top_type_view.b = 'Top'
                    } else if (num < -70) {
                        top_type_view.a = true
                        top_type_view.b = 'bottom'
                    }
                }
            } else if (move_type == 1) {
                // Code on the left and right // Change animation state transition_type = 3
                //Moving position let moveX = event.clientX
                //Moving distance let num = moveX - startX
                //The left value required by the box childbox.style.left = startleft + num + 'px'
                //Sliding direction if (moveX > startX) {
                    if (num > 100) {
                        type.a = true
                        type.b = 'right'
                    }
                } else if (moveX < startX) {
                    if (num < -100) {
                        type.a = true
                        type.b = 'left'
                    }
                }
                // over
            }

        }
        //Raise window.onmouseup = function () {
            //Clear sliding event document.onmousemove = ''
            //Judge the execution animation if (transition_type == 1) {
                //Pull down//Add animation viewlist[indextype].style.transition = 'all .5s';
                //Judge the distance of the pull to determine whether to refresh if (b_top > 70) {
                    //Execute animation transition_status = false
                    viewlist[indextype].style.top = '70px'
                    setTimeout(function () {
                        viewlist[indextype].style.top = '0px'
                        //Start from the first page view_index[indextype][2] = 1
                        autoview(indextype)
                        //Restore animation setTimeout(() => {
                            transition_status = true
                        }, 500);
                    }, 2000)
                } else {
                    viewlist[indextype].style.top = '0px'
                }
            } else if (transition_type == 2) {
                //Up and down //Add transition animation viewlist[indextype].style.transition = 'all .5s';
                //Judge the animation to be executed if (top_type_view.a) {
                    //Judge up and down switching if (top_type_view.b == 'up') {
                        //Subscript change view_index[indextype][0]--
                        if (view_index[indextype][0] <= -1) {
                            view_index[indextype][0] = 0
                        }
                        viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
                        console.log('up')
                    } else if (top_type_view.b == 'down') {
                        view_index[indextype][0]++
                        if (view_index[indextype][0] >= view_index[indextype][1] - 2) {
                            //Generate a new video autoview(indextype)
                        }
                        viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
                    }
                } else {
                    //Restore the existing state viewlist[indextype].style.top = startTop + 'px'
                }
            } else if (transition_type == 3) {
                //Left and right //Execute to determine whether to switch if (type.a) {
                    if (type.b === 'left') {
                        indextype++
                        if (indextype >= 3) {
                            indextype = 2
                        }
                    } else if (type.b === 'right') {
                        indextype--
                        if (indextype <= -1) {
                            indextype = 0
                        }
                    }
                }
                //Add transition childbox.style.transition = 'all 0.5s'
                //Call the switching function set_nav_active(indextype)
            }
            //Restore next judgment t_l_type = true
            //Restore next state move_type = 0
            //Restore animation state transition_type = 0
        }
    }


    //Random background color function autocolor() {
        return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
    }
    //Generate video list by default for (let i = 0; i < viewlist.length; i++) {
        autoview(i)
    }
    //Generate video list function autoview(index) {
        //Get the video type let type = viewlist[index].getAttribute('type')
        //Change the number of videos if (view_index[index][2] == 1) {
            // Clear existing content viewlist[indextype].innerHTML = ''
            //Record video quantity view_index[index][1] = 10
        } else {
            //Accumulate the number of videos view_index[index][1] += 10
        }
        //index inserted subscript for (let i = 0; i < 10; i++) {
            //Create dom
            let div = document.createElement('div')
            //Name div.className = 'view_child'
            //Content div.innerHTML = `
            <div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
            <hr></hr>
            <div>Page number: ${view_index[index][2]}</div>
        `
            //Set the background color div.style.backgroundColor = autocolor()
            //Set the box height div.style.height = viewheight + 'px'
            //Append viewlist[index].appendChild(div)
        }
        //Change the next page number view_index[index][2]++
        console.log(view_index)
    }

    //Double click to stick to top let nav_box = document.querySelector('.nav_box')
    nav_box.ondblclick = function () {
        viewlist[indextype].style.transition = 'all .5s'
        viewlist[indextype].style.top = '0px'
        view_index[indextype][0] = 0
    }
</script>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js realizes the underline sliding effect when switching tabs on mobile terminals
Swiper.js implements left and right sliding of mobile elements
An example of using js to natively implement the finger sliding carousel effect on mobile devices
JS implements mobile terminal full screen sliding example code
js realizes the automatic sliding effect of mobile navigation click
Native javascript mobile sliding banner effect
Based on JS, the delete button function appears when sliding left on the mobile terminal
Implementing mobile sidebar sliding effects based on slideout.js
A brief discussion on js touch event gesture sliding event on mobile terminal
JavaScript implements the mobile terminal sliding date selection function

<<: Summary of the differences between MySQL storage engines MyISAM and InnoDB

>>: How to develop Java 8 Spring Boot applications in Docker