react實現(xiàn)原生下拉刷新

更新時間：2022年03月08日 10:37:00 作者：至_臻

這篇文章主要為大家詳細介紹了react實現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

react是基于vue下拉刷新做了一個小小的改動，供大家參考，具體內(nèi)容如下

我是用js寫的用jsx文件轉(zhuǎn)化為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轉(zhuǎn)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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: