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

本文实例为大家分享了js仿写手机端下拉刷新的具体代码，供大家参考，具体内容如下
话不多说先看效果图：

文章图片

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

文章图片

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

文章图片

文章图片

松开时显示文字
实现原理

CSS：

* {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; }

JS：

【原生js仿写手机端下拉刷新】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。