react原生下拉刷新
至_臻 人气:0react是基于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>
加载全部内容