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
    	})
    }
  • 相关阅读:
    数据结构>堆栈的使用 小强斋
    数据结构>图的存储结构 小强斋
    数据结构>图的基本术语 小强斋
    java使用JNDI 获取weblogic配置的数据源 连接数据库 小强斋
    java使用JNDI 获取weblogic配置的数据源 连接数据库 小强斋
    数据结构>队列 小强斋
    C++实现平方的安全方法(redis的实现)
    jmeter性能测试使用示例
    redis学习总结1
    java NIO使用示例
  • 原文地址:https://www.cnblogs.com/panax/p/8510863.html
Copyright © 2011-2022 走看看