原生js模仿下拉刷新功能
JS 功能 原生 刷新 模仿
2023-09-11 14:19:41 时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉刷新</title>
<style>
/* 下拉刷新的css样式 */
.slide-wrap{width:100%;}
.slide-wrap .sliding{
width:100%;
height:50px;
background:blue;
border-radius:0 0 50% 50%;
text-align: center;
font-size:20px;
display: none;
}
.slide-wrap .slided{
width:100%;
background:red;
line-height:50px;
text-align:center;
font-size:20px;
border-radius:0 0 50% 50%;
display: none;
}
.float-box{
width:100%;
height:500px;
background:pink;
}
</style>
</head>
<body>
<div class="float-box">float-box</div>
<script>
//封装下拉刷新的功能模块
(function(){
//1,首先创建一个slide构造函数,用来初始化属性与函数
function Slide(dom){
this.start_y=null;//手指滑动屏幕的初始位置
this.end_y=null;//手指滑动屏幕的结束位置
this.render(dom);//初始化下拉功能的render函数
}
//2、编写render函数
//render函数是用来动态创建下拉刷新的动画图。现在我们在Slide原型上编写render函数。
Slide.prototype={
render:function(dom){
//拿到body节点
var body=document.getElementsByTagName('body');
//创建div,用来显示下拉效果。这个div有‘正在刷新’和‘下拉刷新’这两个子节点
var newItem=document.createElement('div');
//给div设置class属性,该class是下拉效果的样式
newItem.className='slide-wrap';
//用innerHTML将‘正在刷新。。。’和‘下拉刷新着’两个子节点插入到上面创建的div中。
newItem.innerHTML='<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
//然后将创建的div插入到页面的前面
body[0].insertBefore(newItem,dom[0]);
//获取创建完成的下拉刷新div
var dom2=document.getElementsByClassName('slide-wrap');
//运行slide_start()
this.slide_start(dom2);
// console.log(this)//this指向Slide构造函数
},
//3、编写slide-strat()函数
slide_start:function(dom2){
var _this=this;
//监听document整个文档的touchstart事件
document.addEventListener('touchstart',function(evt){
var touch=evt.touches[0];//获取第一个触点
_this.start_y=Number(touch.pageY);//第一个触点的y坐标
console.log(this)//this指向document
console.log(_this)//_this指向Slide构造函数
});
// slide_move
_this.slide_move(dom2);//这边 用this也行
console.log(_this);//_this指向Slide构造函数
console.log(this)
},
//4、编写slide_move()函数
slide_move:function(dom2){
var _this=this;
//监听document的touchmove事件
document.addEventListener('touchmove',function(evt){
//下面这一行代码是保证在手指移动的距离还不到规定的长度的时候,就不显示‘正在刷新’
dom2[0].childNodes[0].style.display='none';
var touch=evt.touches[0];//获取第一个触点
//获取手指向下移动的长度距离
_this.end_y=Number(touch.pageY)-_this.start_y;
// 判断手指移动距离是否大于5,这个为什么设置为5,而不是0呢,主要是为了避免用户不觉意的轻微滑动
if(_this.end_y>5){
// 当滑动距离大于5时,将‘下拉刷新’的效果显示出来,同时将他的高度赋值为手指滑动的距离,已达到慢慢下拉的效果
dom2[0].childNodes[1].style.display='block';
dom2[0].childNodes[1].style.height=_this.end_y+'px';
dom2[0].childNodes[1].style.lineHeight=_this.end_y+'px';
}
});
// 执行slide_end()函数
_this.slide_end(dom2);
},
// 5、编写slide_end()函数
slide_end:function(dom2){
var _this=this;
//监听touchend事件
document.addEventListener('touchend',function(evt){
// 当手指松开的时候,判断手指的滑动距离如果大于100就将‘正在刷新。。。’的效果显示出来,同时隐藏‘下拉刷新的效果’
if(_this.end_y>100){
dom2[0].childNodes[1].style.display='none';
dom2[0].childNodes[0].style.display='block';
console.log('开始刷新');
// 这里模拟3秒后刷新成功,然后隐藏‘正在刷新。。’效果
setTimeout(function(){
dom2[0].childNodes[0].style.display='none';
},3000);
}else{
// 这里是当手指滑动距离小于100时,就将‘下拉刷新’的效果隐藏
dom2[0].childNodes[1].style.display='none';
}
});
}
}//Slide.prototype
//最后将Slide构造函数暴露到全局window
window.Slide=Slide;
})();//最外层的自执行函数
//使用方法
//在页面中new一个Slide()。并将主页的dom节点传进去即可
var target=document.getElementsByClassName('float-box');
new Slide(target);
</script>
</body>
</html>
相关文章
- 实现网页页面跳转的几种方法(meta标签、js实现、php实现)
- 原生Js_使用setInterval() 方法实现图片轮播功能
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)上传进度条
- JS - 解决引入 js 文件无效的问题
- js对象与字符串相互转换
- js/bat批处理调用谷歌浏览器chrome批量打开网页测试web性能
- Knockout.Js官网学习(Mapping插件)
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- Mock.js简易教程,脱离后端独立开发,实现增删改查功能
- Atitit 调用另外语言的功能 目录 1. Waht 常见的语言java python js sql xml h5 c# php等之间的互相调用1 2. 为什么需要互相调用why1 3. 常
- Atitit.跨语言反射api 兼容性提升与增强 java c#。Net php js
- atitit.判断时间重叠方法总结 java c++ c#.net js php
- 前端必备技能知识:vue.js操作excel表格,实现导入导出功能
- 第65篇 QML 之 JS中的对象创建、删除属性、遍历对象
- Typora+PicGo+Gitee+ node.js四大神器 实现自动图片上传功能 妈妈再也不用担心我的图床的问题了 图解过程 容易到没有朋友
- 关于 用 js 实现 快照功能
- 前端可视化:Fabric.js HTML5 canvas 工具库
- js 获取两个值之间的随机整数
- java-小技巧-001-Long序列化到前端js不支持
- js根据数据关键字实现模糊查询功能
- 【JS高级】js面向对象三大特性之继承_06
- 【JS高级】js之函数、重载、匿名函数、作用域及作用域链_03
- 华为校招机试 - 简单的自动曝光、平均像素值(Java & JS & Python)
- 华为校招机试 - 分积木(Java & JS & Python)
- html+css+js完成代码弹出功能