js手机端下拉刷新 原生js仿写手机端下拉刷新
前端挖掘机 人气:0想了解原生js仿写手机端下拉刷新的相关内容吗,前端挖掘机在本文为您仔细讲解js手机端下拉刷新的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js手机端下拉刷新,js手机端刷新,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>
加载全部内容