无限下拉

Posted 2021-06-11 cnchengv

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;