react实现原生下拉刷新
更新时间：2022年03月08日 10:37:00 作者：至_臻
这篇文章主要为大家详细介绍了react实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react是基于vue下拉刷新做了一个小小的改动，供大家参考，具体内容如下
我是用js写的 用jsx文件转化为jsx格式 ，如果用下载的react项目需要稍微改一下
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 这是引入的js转jsx语法文件--> <script src="js/browser.js"></script> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> </head> <body> <div id="root"></div> </body> </html>
css代码
<style>
.box {
text-align: center;
height: 600px;
width: 100vw;
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
.car {
text-align: center;
margin: auto;
width: 199px;
height: 60px;
line-height: 60px;
background-position: 0 0;
background-size: 100% auto;
}
</style>js代码
<script type="text/babel">
const root = document.querySelector('#root')
class Comp extends React.Component {
constructor(...args) {
super(...args)
}
fnstart(ev) {
this.Element = ev.target
this.Element.style.top = 0;
this.scroolTop = ev.changedTouches[0].pageY - this.Element.offsetTop;
document.ontouchmove = this.fnmove.bind(this);
document.ontouchend = this.fnEnd;
// ev.preventDefault && ev.preventDefault();
}
fnmove(ev) {
ev.target.parentNode.children[0].innerHTML = '下拉刷新'
this.T = ev.changedTouches[0].pageY - this.scroolTop;
if (this.scale > 0.12) {
this.scale = 1 - this.T / 200;
} else {
this.scale = 0.12;
}
this.num = this.T * this.scale
// if (this.num > 50) {
// this.num = 50
// }
this.Element.style.top = this.T * this.scale + "px";
}
fnEnd(ev) {
// console.log(ev.target)
console.log(ev.target.parentNode.children[0].innerHTML = '正在刷新...')
this.Element = ev.target
document.ontouchmove = null;
document.ontouchend = null;
setTimeout(() => {
this.Element.style.top = 0;
this.Element.style.transition = ".3s ease all";
this.Element.addEventListener("transitionend", () => {
this.Element.style.transition = null;
});
}, 3000);
}
render() {
return (
<div className="car-box">
<div className="car">下拉刷新</div>
<div className="box" onTouchStart={this.fnstart.bind(this)}>
<div className="con-txt">上拉刷新</div>
</div>
</div >)
}
}
ReactDOM.render(<Comp />, root)
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了React Native项目设置路径别名实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
react+ant design实现Table的增、删、改的示例代码
这篇文章主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了react中context传值和生命周期,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
这篇文章主要介绍了D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本) ，本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下2019-05-05
本篇文章主要介绍了详解升级react-router 4 踩坑指南，主要是对react-router 4升级的踩坑总结，有兴趣的可以了解一下2017-08-08
在React中使用React.createRef：更优雅的DOM引用方式
React提供了多种方式来引用DOM元素,其中React.createRef()是一种更为现代、更优雅的方式,在这篇文章中,我们将深入了解React.createRef()的应用,以及它为开发者带来的便利,感兴趣的朋友一起看看吧2024-01-01
在开发项目的时候,从服务端获取到数据列表后,展示给用户看,需要实现数据自动滚动效果,怎么实现呢,下面小编给大家分享react实现列表滚动组件功能实现代码,感兴趣的朋友一起看看吧2023-09-09
这篇文章主要介绍了React Native实现登录功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了React生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要为大家介绍了React18 useState何时执行更新及微任务理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论