react上拉加载下拉刷新

2019-06-01更新：

上次说了由于懒，所以就直接用了jq，然后其实在工作中实战的时候还是有其他问题的，优化问题优化的恶心（其实是上次留下的坑太多了）所以抽了周末把这个功能根据官方的示例重新写了一下，并运用到项目中了，目前一切正常。具体使用办法，大家去官网看api，很详细的。

本次优化内容：

1：这次去掉了jq

2：优化了标题栏的样式

3：根据官方结构优化了填充数据流程

等等。。。

github，欢迎star： https://github.com/majiang666/mescroll-react

demo，扫一扫

参考：

https://github.com/mescroll/mescroll/blob/master/mescroll.js/html-demo/base/list-mescroll-more.html

http://www.mescroll.com/api.html?v=190426

============================================================

首先感谢mescroll的作者，找了很多也试了很多这种上拉加载，还是这个用着顺手，主要是之前需求中也用过，相对熟悉一点，现在基本上大家都用框架来开发了，官方出了个vue版本，但是react还没出来，周末就把他一直移植到了react，虽然还不是很完整，里边涉及了很多获取dom，就索性直接在这个模块中引入了jquery（其实是懒）。

效果如下：

源码：

order.js

/* jshint esversion: 6 */
import React, { Component } from 'react';
import './order.css';
// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js';
import 'mescroll.js/mescroll.min.css';
import $ from "jquery";
// import { apiAddress } from '../axios/api';
let mescrollArr = new Array(3);

class Order extends Component {
	constructor(props){
		super(props);
		this.state = {
			mescroll: null,//初始化mescroll
			curNavIndex:"0",//初始化当前导航
			dataList:{//接口返回数据
				"data":[
					{
						"name":"test list",
						"type":"0"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"2"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"2"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"2"
					},
					{
						"name":"test list",
						"type":"1"
					},
					{
						"name":"test list",
						"type":"1"
					}
				]
			}
		}
		this.tabT = React.createRef();//获取顶部当前选中的位置
	}

	componentDidMount(){
		mescrollArr[0] = this.initMescroll("mescroll0", "dataList0");//默认初始化第一个tab
	}
	// 点击切换tab及填充数据
	tabTitle = (e) => {
		let index = e.target.getAttribute('data-index')//获取当前下标
		$(e.target).css("color","#fe5858").siblings().attr("style","");//当前选中的颜色
		if(index === '0'){
			this.tabT.current.style.left = "8.325%";
		}else if(index === '1'){
			this.tabT.current.style.left = "41.625%";
		}else{
			this.tabT.current.style.left = "74.925%";
		}
		// 解决来回切换重复追加样式
		$("#mescroll"+index+" .mescroll-downwarp").remove();
		$("#mescroll"+index+" .mescroll-upwarp").remove();
		if(this.state.curNavIndex !== index) {
			// 隐藏当前列表和回到顶部按钮
			$("#mescroll"+this.state.curNavIndex).hide();
			//显示对应的列表
			$("#mescroll"+index).show();
			//取出菜单所对应的mescroll对象,如果未初始化则初始化
			if(mescrollArr[index] === undefined){
				mescrollArr[index] = this.initMescroll("mescroll"+index, "dataList"+index);
			}
			//更新标记
			this.setState({
				curNavIndex : index
			})
		}
	}
	// 初始化数据
	initMescroll = (mescrollId,clearEmptyId) => {
		this.setState({
			mescroll:new MeScroll(mescrollId, {
				//上拉加载的配置项
				up: {
					callback: this.getListData, //上拉回调
					isBounce: false, //此处禁止ios回弹
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: null, //图标,默认null
						tip: '<div className="hasNoData">'+
						'暂无数据'+
					'</div>',
					},
					clearEmptyId: clearEmptyId, //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
					htmlNodata:'<p className="upwarp-nodata">-- 我也是有底线的 --</p>'
				}
			})
		});
	}

	getListData = (page) => {
		console.log("页码："+page.num,"数量："+page.size);
		var totalSize = "100";
		var res = this.state.dataList;
		//后台接口有返回列表的总数据量 totalSize
		//必传参数(当前页的数据个数, 总数据量)
		this.state.mescroll.endBySize(res.data.length, totalSize);
		//设置列表数据
		this.setListData(res.data,this.state.curNavIndex);
	}

	setListData = (pageData,dataIndex) => {
		console.log(pageData);
		function selectData(type){
			var str = "";
			for (var i = 0; i < pageData.length; i++) {
				if(type === "0"){
					str += `<p style="line-height:50px;">${pageData[i].name}-全部</p>`;
				}else if(type === "1"){
					str += `<p style="line-height:50px;">${pageData[i].name}-未支付</p>`;
				}else{
					str += `<p style="line-height:50px;">${pageData[i].name}-已支付</p>`;
				}
			}
			return str;
		}
		var noData = '<div className="hasNoData">'+
			'<p>亲，这里没有您要找的数据</p>'+
		'</div>';
		if(dataIndex === '0'){
			var data1 = selectData("0");
			if(!window.isEmpty(data1)){
				if($("#dataList0").html() === ""){
					$("#dataList0").append(data1);
				}
			}
		}else if(dataIndex === '1'){
			var data2 = selectData("1");
			if(!window.isEmpty(data2)){
				if($("#dataList1").html() === ""){
					$("#dataList1").append(data2);
				}
			}else{
				if(!window.isEmpty(pageData)){
					$("#dataList1").append(noData);
					$("#mescroll1 .mescroll-upwarp").hide();
				}
			}
		}else{
			var data3 = selectData("2");
			if(!window.isEmpty(data3)){
				if($("#dataList2").html() === ""){
					$("#dataList2").append(data3);
				}
			}else{
				if(!window.isEmpty(pageData)){
					$("#dataList2").append(noData);
					$("#mescroll2 .mescroll-upwarp").hide();
				}
			}
		}
	}

	render(){  
		return(
			<div className="order-list">
				<div className="gift-tab-title">
					<ul>
						<li onClick={this.tabTitle} data-index="0" className="row-3" style={{color:'#fe5858'}}>全部</li>
						<li onClick={this.tabTitle} data-index="1" className="row-3">未支付</li>
						<li onClick={this.tabTitle} data-index="2" className="row-3">已支付</li>
					</ul>
					<span className="cur" ref={this.tabT}></span>
				</div>
				<div className="gift-tab-mean">
					<div className="tab-item mescroll" id="mescroll0">	
						<div id="dataList0" className="data-list">
							1
						</div>
					</div>
					<div className="tab-item mescroll" id="mescroll1" style={{display: 'none'}}>	
						<div id="dataList1" className="data-list">
							2
						</div>
					</div>
					<div className="tab-item mescroll" id="mescroll2" style={{display: 'none'}}>	
						<div id="dataList2" className="data-list">
							3
						</div>
					</div>
				</div>
			</div>
		)
	}
}
export default Order;

order.css

.row-1{
	width:100%;
}
.row-2{
	width:50%;
}
.row-3{
	width:33.3%;
}
.row-4{
	width:25%;
}
.row-5{
	width:20%;
}
.gift-tab-title{
	height:0.515rem;
	background: #fff;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index: 99;
}
.gift-tab-title:after {
	content:"";
	position:absolute;
	z-index:2;
	left:0;
	bottom:0;
	height:1px;
	width:100%;
	border-bottom:1px solid #ccc;
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
	-webkit-transform:scaleY(.5);
	transform:scaleY(.5);
}
.gift-tab-title ul li{
	float:left;
	line-height: 0.515rem;
	text-align: center;
	font-size:14px;
	color:#333;
	position: relative;
}
.gift-tab-title span.cur{
	position:absolute;
	bottom:0;
	right:0;
	left:8.325%;
	border-bottom:solid 1px #fe5858;
	width:16.65%;
	transition: all .2s linear;
	color:#fe5858;
}
.gift-tab-titles span.cur{
	left:12.5%;
	width:25%;
}
.gift-tab-mean{
	overflow: hidden;
}
.tab-item{
	
}
.mescroll{
    position: fixed;
    top: 0.52rem;
    bottom: 50px;
    left:0;
    right:0;
    height: calc(100% - 50px) !important;
    width:100%;
}
.hasNoData{
	text-align: center;
}

欢迎关注小程序，感谢您的支持！