移动端刷新组件XtnScroll--ReactJS实现

最新推荐文章于 2024-08-09 07:18:05 发布

xiaotuni

最新推荐文章于 2024-08-09 07:18:05 发布

阅读量1.3k

点赞数 1

分类专栏： React 组件文章标签： ReactJs 移动动画

本文链接：https://blog.csdn.net/xiaotuni/article/details/77451519

版权

XtnScroll 组件，先看一下效果图

下拉的效果
这里写图片描述
上拉的效果

以前都是用Vue–XtnScroll、Angular4–XtnScroll来实现的刷新组件今天说说React怎么实现。其实这三种框架里用到的方法都是一样的，只是每个里面都有自己的语法特性不一样，所以实现起来大同小意了。

创建组件步骤

目录结构如下图所示

这里写图片描述

scss 样式文件
svg 加载动画
XtnScroll.js真正的文件

XtnScroll.js文件

import React, { Component, PropTypes } from 'react';
import { Utility } from 'components';
const styles = require('./scss/XtnScroll.scss');
/**
 * <XtnScroll 
 *   RefreshComplete={RefreshComplete} 
 *   NextDataComplete={NextDataComplete}
 *   onRefresh={()=>{....}}
 *   onNextData={()=>{....}}
 * />
 */
export default class XtnScroll extends Component {
   

}

属性

   static propTypes = {
    children: PropTypes.any,                   // 子项
    Percentage: PropTypes.number,              // 百分比
    RefreshComplete: PropTypes.bool,           // 刷新完成
    NextDataComplete: PropTypes.bool,          // 加载更多数据完成
    onRefresh: PropTypes.func,                 // 刷新操作
    onNextData: PropTypes.func,                // 更多数据
   }

render方法

里面三个主要方法 onTouchStart、onTouchEnd、onTouchMove。分别对应的三个事件__HandlerStart、__HandlerEnd、__HandlerMove。

  render() {
    const { RefreshComplete, NextDataComplete } = this.props;
    return (
      <div ref="divXtnScroll" className={styles.refreshCss} style={this.__GetStyle()}