首页 开发前沿 JavaScript 正文
我要投稿

JS实现移动端上下滑动一次一屏

JavaScript
2022-04-15 0 653

本文实例为大家分享了JS实现移动端上下滑动一次一屏的具体代码，供大家参考，具体内容如下

功能如下:

  • 头部： 附近、关注、推荐选项卡的切换
  • 左右滑动功能、头部选项卡跟随动画
  • 上下滑动划动一屏，滑动超过头部刷新
  • 双击选项卡回到顶部

JS实现移动端上下滑动一次一屏

上代码：

<!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;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            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="附近">

                </div>
            </div>
            <div class="child2">
                <div class="listview" type="关注">

                </div>
            </div>
            <div class="child3">
                <div class="listview" type="推荐">

                </div>
            </div>
        </div>
        <div class="nav_box">
            <div>附近</div>
            <div>关注</div>
            <div class="active_nav">推荐</div>
        </div>
    </div>
</body>
<script>

    //获取动画盒子
    let childbox = document.querySelector('.childbox')
    //获取屏幕的高度
    let viewheight = document.querySelector('#box').offsetHeight
    //获取所有的导航
    let childnav = document.querySelector('.nav_box').querySelectorAll('div')
    //获取视频类型盒子
    let viewlist = document.querySelectorAll('.listview')
    //导航索引（0,附近,1,关注，2推荐）
    let indextype = 2
    //视频播放的索引(0:附近,1:关注,2:推荐)[下标,视频的数量,页码]
    let view_index = {
        0: [0, 0, 1],
        1: [0, 0, 1],
        2: [0, 0, 1]
    }
    //初始化导航
    set_nav_active(indextype)
    //导航选中状态
    function set_nav_active(index) {
        //清除选中状态
        for (let i = 0; i < childnav.length; i++) {
            childnav[i].className = ''
        }
        //给选中的加上值
        childnav[index].className = 'active_nav'
        //改变盒子位置
        childbox.style.left = index * -100 + '%'
    }
    //给导航加点击事件
    for (let i = 0; i < childnav.length; i++) {
        childnav[i].onclick = function () {
            //加上过渡动画
            childbox.style.transition = 'all 0.5s'
            //改变点击导航状态
            indextype = i
            set_nav_active(indextype)
        }
    }
    //左右滑动
    let box = document.querySelector('#box')
    //动画是否结束的状态
    let transition_status = true
    //按下
    box.onmousedown = function (event) {
        //判断是否可以执行动画
        if (!transition_status) {
            return
        }
        //获取坐标值
        let startY = event.clientY
        let startX = event.clientX
        //是否要进判断
        let t_l_type = true
        //获取上下还是左右滑动的状态(0:不动;1:左右;2:上下)
        let move_type = 0
        //记录动画行为(1:下拉,2:上下，3：左右，0：不动)
        let transition_type = 0
        // 左右start
        //清除盒子动画
        childbox.style.transition = ''
        //获取盒子left位置
        let startleft = childbox.offsetLeft
        //是否切换滑动
        let type = {
            a: false,
            b: ''
        }
        //左右over
        //上下滑动
        //滑动的初始化位置
        let startTop = viewlist[indextype].offsetTop
        //判断是否切换
        let top_type_view = {
            a: false, //是否要切换
            b: '', //判断向上还是向下
        }
        console.log(startTop)
        //上下over
        //下拉刷新
        //清除动画
        viewlist[indextype].style.transition = '';
        //记录下拉距离
        let b_top = 0
        //下拉over
        document.onmousemove = function (event) {
            //获取移动时坐标
            let moveY = event.clientY
            let moveX = event.clientX
            //加是否要判断的开关
            if (t_l_type) {
                //判断是左右滑动还是上下
                if (Math.abs(moveY - startY) > 5) {
                    //停止下次判断
                    t_l_type = false
                    //记录滑动状态
                    move_type = 2
                }
                if (Math.abs(moveX - startX) > 5) {
                    //停止下次判断
                    t_l_type = false
                    //记录滑动状态
                    move_type = 1
                }
            }
            //判断滑动代码
            if (move_type == 2) {
                //下拉需要两个条件 1 下拉的 2 上没有东西了
                if (view_index[indextype][0] == 0 && moveY - startY > 0) {
                    console.log('下拉')
                    //改变动画状态
                    transition_type = 1
                    //计算下拉距离
                    b_top = moveY - startY
                    //拉动视图盒子
                    viewlist[indextype].style.top = b_top + 'px'
                    return
                }
                //执行上下滑动
                //下拉的时候拒绝上下滑动
                if (transition_type != 1) {
                    //改变动画状态
                    transition_type = 2
                    //移动的位置
                    let moveY = event.clientY
                    //计算上下移动的距离
                    let num = moveY - startY
                    //改变拖拽元素的top值
                    viewlist[indextype].style.top = startTop + num + 'px'
                    //判断是否要切换
                    if (num > 70) {
                        top_type_view.a = true
                        top_type_view.b = '上'
                    } else if (num < -70) {
                        top_type_view.a = true
                        top_type_view.b = '下'
                    }
                }
            } else if (move_type == 1) {
                // 左右的代码
                //改变动画状态
                transition_type = 3
                //移动的位置
                let moveX = event.clientX
                //移动的距离
                let num = moveX - startX
                //盒子需要的left值
                childbox.style.left = startleft + num + 'px'
                //滑动的方向
                if (moveX > startX) {
                    if (num > 100) {
                        type.a = true
                        type.b = '右'
                    }
                } else if (moveX < startX) {
                    if (num < -100) {
                        type.a = true
                        type.b = '左'
                    }
                }
                // over
            }

        }
        //抬起
        window.onmouseup = function () {
            //清除滑动事件
            document.onmousemove = ''
            //判断执行动画
            if (transition_type == 1) {
                //下拉
                //加上动画
                viewlist[indextype].style.transition = 'all .5s';
                //判断拉动的距离判断是否刷新
                if (b_top > 70) {
                    //执行动画
                    transition_status = false
                    viewlist[indextype].style.top = '70px'
                    setTimeout(function () {
                        viewlist[indextype].style.top = '0px'
                        //从第一页开始
                        view_index[indextype][2] = 1
                        autoview(indextype)
                        //还原动画
                        setTimeout(() => {
                            transition_status = true
                        }, 500);
                    }, 2000)
                } else {
                    viewlist[indextype].style.top = '0px'
                }
            } else if (transition_type == 2) {
                //上下
                //加上过渡动画
                viewlist[indextype].style.transition = 'all .5s';
                //判断执行的动画
                if (top_type_view.a) {
                    //判断上下切换
                    if (top_type_view.b == '上') {
                        //下标改变
                        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('上')
                    } else if (top_type_view.b == '下') {
                        view_index[indextype][0]++
                        if (view_index[indextype][0] >= view_index[indextype][1] - 2) {
                            //生成新的视频
                            autoview(indextype)
                        }
                        viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'
                    }
                } else {
                    //还原现有状态
                    viewlist[indextype].style.top = startTop + 'px'
                }
            } else if (transition_type == 3) {
                //左右
                //执行判断是否切换
                if (type.a) {
                    if (type.b === '左') {
                        indextype++
                        if (indextype >= 3) {
                            indextype = 2
                        }
                    } else if (type.b === '右') {
                        indextype--
                        if (indextype <= -1) {
                            indextype = 0
                        }
                    }
                }
                //加上过渡
                childbox.style.transition = 'all 0.5s'
                //调取切换函数
                set_nav_active(indextype)
            }
            //还原下次判断
            t_l_type = true
            //还原下次状态
            move_type = 0
            //还原动画状态
            transition_type = 0
        }
    }


    //随机背景颜色
    function autocolor() {
        return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
    }
    //默认生成视频列表
    for (let i = 0; i < viewlist.length; i++) {
        autoview(i)
    }
    //生成视频列表
    function autoview(index) {
        //获取视频类型
        let type = viewlist[index].getAttribute('type')
        //更改视频数量
        if (view_index[index][2] == 1) {
            //清除现有内容
            viewlist[indextype].innerHTML = ''
            //记录视频数量
            view_index[index][1] = 10
        } else {
            //累加视频数量
            view_index[index][1] += 10
        }
        //index 插入的下标
        for (let i = 0; i < 10; i++) {
            //创建dom
            let div = document.createElement('div')
            //命名
            div.className = 'view_child'
            //内容
            div.innerHTML = `
            <div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
            <hr></hr>
            <div>页码：${view_index[index][2]}</div>
        `
            //设置背景颜色
            div.style.backgroundColor = autocolor()
            //设置盒子高度
            div.style.height = viewheight + 'px'
            //追加
            viewlist[index].appendChild(div)
        }
        //更改下次页码
        view_index[index][2]++
        console.log(view_index)
    }

    //双击置顶
    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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持NICE源码。

收藏 (0) 点赞 (0)

免责声明：
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。 不得使用于非法商业用途，不得违反国家法律。否则后果自负！

2、本站信息来自网络，版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序，请支持正版源码、软件，购买注册，得到更好的正版服务。
如有侵犯你版权的，请邮件与我们联系处理（邮箱:skknet@qq.com），本站将立即改正。

NICE源码网 JavaScript JS实现移动端上下滑动一次一屏 https://www.niceym.com/28768.html

上一篇： Vue过滤器（filter）实现及应用场景详解
下一篇： 帮你提高开发效率的JavaScript20个技巧
猜你喜欢
TA的动态
热门标签
热门文章
随机推荐
首页 模板 菜单 开发 我的