无限下拉

import React from 'react';
import ReactDOM from 'react-dom';


import ListItem from '../component/ListItem'

import 'antd-mobile/dist/antd-mobile.css'; 
import { Button } from 'antd-mobile';

import { NavBar, Icon } from 'antd-mobile';
import { SearchBar, WhiteSpace, WingBlank } from 'antd-mobile';
import { Tabs, Badge } from 'antd-mobile';

import { TabBar } from 'antd-mobile';

import { withRouter } from 'react-router-dom';  
import api from '../common/api'
import { Provider,connect } from "react-redux"
import { userStore ,mapStateToProps,gloableObject} from '../redux/index'

  const tabs2 = [
    { title: '推荐', sub: '1' },
    { title: 'hot', sub: '2' },
    { title: '1', sub: '3' },
    { title: '2', sub: '4' },
    { title: '3', sub: '5' },
  ];
  const HeaderTabExample = () => (
    <div>
    <Tabs tabs={tabs2}
        initialPage={1}
        tabBarPosition="top"
        renderTab={tab => <span>{tab.title}</span>}
      >
      </Tabs>
    </div>
  );


  class TabBarExample extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedTab: 'redTab',
        hidden: false,
        fullScreen: false,
      };
    }
  
    renderContent(pageText) {
      return (<div></div>
      );
    }
  
    render() {
      return (
        <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 40 }}>
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              title="Life"
              key="Life"
              icon={<div style={{
                width: '22px',
                height: '5px',
                }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '5px',
               }}
              />
              }
              selected={this.state.selectedTab === 'blueTab'}
              
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
              }}
              data-seed="logId"
            >
              {this.renderContent('Life')}
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '5px',
                  }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '5px',
                  }}
                />
              }
              title="Koubei"
              key="Koubei"
      
              selected={this.state.selectedTab === 'redTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'redTab',
                });
                this.props.history.push('/add');
              }}
              data-seed="logId1"
            >
              {this.renderContent('Koubei')}
            </TabBar.Item>
      
            { this.props.isLogin?<TabBar.Item
                    icon={
                        <div style={{
                          width: '22px',
                          height: '5px',
                          }}
                        />
                      }
                      selectedIcon={
                        <div style={{
                          width: '22px',
                          height: '5px',
                          }}
                        />
                      }
              title="我的"
              key="my"
       
              selected={this.state.selectedTab === 'yellowTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'yellowTab',
                });

                this.props.history.push('/user');
              }}
            >
              {this.renderContent('My')}
            </TabBar.Item>:
            <TabBar.Item
            icon={
                <div style={{
                  width: '22px',
                  height: '5px',
                  }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '5px',
                  }}
                />
              }
      title="登录"
      key="my"
   
      selected={this.state.selectedTab === 'yellowTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'yellowTab',
        });

        this.props.history.push('/login');
      }}
    >
      {this.renderContent('My')}
    </TabBar.Item>}




          </TabBar>
        </div>
      );
    }
  }
//  {/*     badge={1}*/}

  const MyTabBarExample=withRouter(TabBarExample);
  

  
  const MBottomTabBar = connect(mapStateToProps)(MyTabBarExample);

class Main extends React.Component {
    constructor(props) {
          super(props);    
          
          this.state = {      
            value: null,    
            name:'',
            list:[],
            refresh:0,
          };  
    }//<li>2小时前</li>

    async componentDidMount(){
   
      let a=gloableObject.articleList;
      if(a.length==0)
        this.getNextList()
      else {
        this.setState({list:a})
        console.log(gloableObject)
        debugger
        //alert(gloableObject.sTop)
        document.documentElement.scrollTop =gloableObject.sTop
        document.body.scrollTop = gloableObject.sTop
        window.scrollTo(100,500);
      } 
        
    }
    async getNextList(){
      /*
      let ret = await api.get('/api/article/list')
      console.log(ret)
      let a = this.state.list.concat(ret)
      */
     let a = [{title:'haha',id:1},
              ]
      this.setState({list:a})
      this.setState({refresh:this.state.refresh+1})
      gloableObject.articleList = a;
    }
    componentWillMount(){
      console.log('11')
      window.addEventListener('scroll',()=>{
        let h =window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight 
       // alert(document.body.scrollTop+' '+document.documentElement.scrollTop)
       var sTop = document.documentElement.scrollTop || document.body.scrollTop;
       //先这样
       if(sTop!=0)
         gloableObject.sTop = sTop;

        console.log(window.pageYOffset , window.innerHeight,document.documentElement.scrollHeight )
        console.log(h)
        if(h) {
           this.getNextList()
         // alert('底')

        }
      })
    }

    render() {
        const {} = this.props;
        return (
            <div>
              {/* 
            <SearchBar style={{backgroundColor:'#108ee9'}} placeholder="自动获取光标"  />
            */}
            <div style={{position:'fixed',top:'0px',width:'100%'}}>
               <HeaderTabExample />
            </div>   
            <WhiteSpace />
            <div style={{marginTop:'40px',lineHeight:'140%', overflow: 'scroll' }}>
              {this.state.list.map(val => (
                <ListItem title={val.title} id={val.id} />
              ))}
            </div>
            <div style={{position:'fixed',bottom:'0px',width:'100%'}}>
              <MBottomTabBar />
            </div>
          </div>
        )
    }
}

export default Main;