zoukankan      html  css  js  c++  java
  • 在react中引入下拉刷新和上拉加载

    1. 首先引入插件 import ReactPullLoad, {STATS} from 'react-pullload'

    2. 初始化:

           constructor(props) {
               super(props);
            this.state = {
    			action: STATS.init,
            	hasMore: true,
            	isMore:1,
    		    page:1
            	
            }
    

    3. // 用来触发加载和刷新的函数

    handleAction = (action) => {
    	console.info(action, this.state.action, action === this.state.action);
    	//new action must do not equel to old action
    	if(action === this.state.action) {
    		return false
    	}
    
    	if(action === STATS.refreshing) { //刷新
    		this.handRefreshing();
    
    	} else if(action === STATS.loading) { //加载更多
    		this.handLoadMore();
    	} else {
    		//DO NOT modify below code
    		this.setState({
    			action: action
    		})
    	}
    }
    //刷新
    handRefreshing = () => {
    	if(STATS.refreshing === this.state.action) {
    		return false
    	}
    	setTimeout(() => {
    		//refreshing complete
    		this.setState({
    			hasMore: true,
    			action: STATS.refreshed
    		});
    	}, 2000)
    	this.setState({
    		action: STATS.refreshing
    	})
    }
    //加载更多
    handLoadMore = () => {
    	if(STATS.loading === this.state.action) {
    		return false
    	}
    	setTimeout(() => {
    		if(this.state.isMore === 0) {
    			this.setState({
    				action: STATS.reset,
    				hasMore: false
    			});
    		} else {
    			var n=this.state.page;
    				n++;
    				$.ajax({
    					type: "POST",
    					url:httphead+"/author/goods/getList",
    					data:{
    						page:n,
    						end:10,
    						cateIds:catAllId,
    						keyword:this.state.value
    					},
    					headers:{
    						Authorization:headers_vendor
    					},
    					success:function(data){
    						
    						if(data.code == 100){
    							var nData = this.state.goodList.concat(data.data.goodsList);
    							this.setState({
    								goodList:nData,
    								action: STATS.reset,
    								isMore:data.data.isMore,
    								page:n
    							})
    						}else if(data.code == 500){
    							window.location.href = "/";
    						}else{
    							alert(data.message);
    						}
    					}.bind(this)
    				})
    		}
    	}, 500)
    
    	this.setState({
    		action: STATS.loading
    	})
    }
  • 相关阅读:
    html5_css 3 学习指南__转
    MySQL常见故障处理手册_转
    MYSQL出错代码列表——转
    Redhat 6环境下安装Oracle 12c的方法
    Wireshark入门:分析DHCP协议的运行
    重命名Oracle数据库的表空间(Renaming a Tablespace)
    Oracle DB 分区特性概述 Overview of Partitions
    Oracle Database Concepts:介绍模式对象(Introduction to Schema Objects)
    Supporting Connected Routes to Subnet Zero
    Secondary IP Addressing
  • 原文地址:https://www.cnblogs.com/panax/p/8510863.html
Copyright © 2011-2022 走看看