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中的RefreshContorl下拉刷新使用
我们知道App中都有下拉加载,在React Native中也有类似的控件 一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用 用来设置下拉刷新功能是否可用 (5) progre
-
React native ListView 增加顶部下拉刷新和底下点击刷新示例
1. 底部点击刷新 1.1 先增加一个按钮 render() { if(!this.state.data){ return( <Text>Loading... </Text> ) }else{ return( <ListView refreshControl={ <RefreshControl refreshing = {false} onRefresh = {this.reloadWordData.bind(this)} /> } dataSource={thi
-
react native之ScrollView下拉刷新效果
本文实例为大家分享了react native之ScrollView下拉刷新效果的具体代码,供大家参考,具体内容如下 ScrollView的refreshControl属性用于下拉刷新,只能用于垂直视图,即horizontal不能为true. 1.创建自定义CKRefresh.js刷新组件 import React,{Component} from 'react'; import { View, Text, StyleSheet, ScrollView, RefreshControl, Dimen
-
React Native 自定义下拉刷新上拉加载的列表的示例
在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的
-
react native基于FlatList下拉刷新上拉加载实现代码示例
react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用 官方介绍:https://reactnative.cn/docs/flatlist/ 下面是效果图: ios效果图 android效果图 总体思路就是:就是计算屏幕高度,然后减去导航的头部,根据列表高度计算出每页的个数,然后向上取整.这样做的目的是:防止不满屏状态下的,onEndReac
-
react-native ListView下拉刷新上拉加载实现代码
本文介绍了react-native ListView下拉刷新上拉加载实现.分享给大家,具体如下: 先看效果图 下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </List
-
react实现原生下拉刷新
react是基于vue下拉刷新做了一个小小的改动,供大家参考,具体内容如下 我是用js写的 用jsx文件转化为jsx格式 ,如果用下载的react项目需要稍微改一下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
-
vue实现原生下拉刷新
本文实例为大家分享了vue实现原生下拉刷新的具体代码,供大家参考,具体内容如下 这是动画样式 文字样式 html代码 <template> <div class="car-box"> <div class="car">下拉刷新</div> <div class="box" @touchstart="fnstart" ref="Element"
-
Android实现上拉加载更多以及下拉刷新功能（ListView）
首先为大家介绍Andorid5.0原生下拉刷新简单实现. 先上效果图: 相对于上一个19.1.0版本中的横条效果好看了很多.使用起来也很简单. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" and
-
原生js实现下拉刷新和上拉加载更多
本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)
-
原生js仿写手机端下拉刷新
本文实例为大家分享了js仿写手机端下拉刷新的具体代码,供大家参考,具体内容如下 话不多说先看效果图: 当下拉小于40px时显示文字: 当下拉大于40px时现实文字 松开时显示文字 实现原理 <div class="content"> <div class="left"></div> <div class="top"> <p id="p"></p> <