react实现原生下拉刷新
作者：至_臻
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。