React是基于Vue下拉刷新做了一个小小的改动，供大家参考，具体内容如下 我是用js写的 用jsx文件转化为jsx格式 ，如果用下载的react项目需要稍微改一下 html代码 &
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>--结束END--
本文标题: react实现原生下拉刷新
本文链接: https://www.lsjlt.com/news/141701.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0