• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

原生js仿写手机端下拉刷新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了js仿写手机端下拉刷新的具体代码,供大家参考,具体内容如下

话不多说先看效果图:

当下拉小于40px时显示文字:

当下拉大于40px时现实文字

松开时显示文字

实现原理

<div class="content">
        <div class="left"></div>
        <div class="top">
            <p id="p"></p>
            <div id="buttom">
            </div>
        </div>
</div>

CSS:

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .content {
        width: 350px;
        height: 600px;
        position: relative;
        margin: 0 auto;
    }
    
    .top {
        width: 100%;
        height: 100%;
        background-color: #ccc;
        border: 12px solid black;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 50px;
        border-top: 35px solid black;
    }
    
    #buttom {
        width: 100%;
        height: 100%;
        background-color: rgb(47, 196, 47);
        position: relative;
        padding: 10px;
        border-top: 2px solid red;
    }
    
    #p {
        display: inline-block;
        height: 30px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        color: rgb(2, 2, 2);
        font-size: 15px;
        position: absolute;
        top: 40px;
        left: 0;
        display: none;
    }
    
    .left {
        height: 10px;
        width: 100px;
        background-color: #ccc;
        position: absolute;
        top: 12px;
        left: 110px;
        border-radius: 5px;
    }
    
    .left::after {
        display: inline-block;
        content: "";
        width: 15px;
        height: 15px;
        background-color: #ccc;
        border-radius: 50%;
        position: absolute;
        left: 120px;
        top: -2px;
    }
</style>

JS:

<script>
    var but = document.getElementById("buttom");
    var p = document.getElementById("p");
    var moveY = 0 //初始化按下时的位置
    var tops = 0; //初始化tops。tops为下拉的距离
    but.onmousedown = function(e) { //鼠标按下事件
        moveY = e.offsetY //获取鼠标按下时Y轴的位置
        but.onmousemove = function(e) { //鼠标移动事件
            p.innerHTML = "下拉刷新"
            p.style.display = "block"; //鼠标移动时现实提升文字并且让文字为“下拉刷新”
            tops = e.offsetY - moveY //tops大小为鼠标Y轴移动的距离减去按下时的距离
            if (tops < 0) {
                tops = 0 //阻止上拉
            } else if (tops > 40) {
                //tops大于40时提示可以松开鼠标马上刷新
                p.innerHTML = "松开立刻刷新"
            }
            this.style.top = tops + 'px'; //让元素相对定位的top值等于tops的值
            // console.log(tops)
        }
        but.onmouseup = function() { //鼠标松开事件
            but.onmousemove = null //清空鼠标移动事件,阻止元素继续跟着鼠标移动
            if (tops < 40) {
                //如果下拉距离b不足40px的话,元素马上复位不进行刷新,并且提示文字消失
                this.style.top = 0;
                p.style.display = "none"
            } else {
                //如果下拉距离大于40px提示正在刷新
                p.innerHTML = "正 在 刷 新 . . ."
                setTimeout(() => { //延迟1.3秒后复位,这里做的只是模仿,实际项目需要在重新请求数据成功后复位
                    tops = 0
                    this.style.top = tops;
                    p.style.display = "none"
                }, 1300);
            }
        }
    }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue基础入门之vuex安装与使用发布时间:2022-02-05
下一篇:
vue实现商品详情页放大镜功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap