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
    	})
    }
  • 相关阅读:
    如何更好的学习编译原理?
    组合数据类型练习
    简化版c语言文法
    Python基础练习
    Linux 命令
    实验一:词法分析实验报告
    20160930 词法分析程序
    大数据概述
    WP7应用开发笔记(7) 配置和存储
    欧拉计划 第九题
  • 原文地址:https://www.cnblogs.com/panax/p/8510863.html
Copyright © 2011-2022 走看看