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;
}欢迎关注小程序，感谢您的支持！
