react+antdm上拉載入

react+antdm上拉載入（元素，滾動條在元素上）

js

class TrianCourse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            courseData: null,
            getDataConfig: {
                pIndex: 1,
                pSize: 6,
                courseType: 3,
                trainType: -1,
                isPay: false,
                isAlbum:true
            }

        }
    }

    componentDidMount() {
        this.getData();
        //給元素新增滾動監聽
        document.getElementById("train-course").addEventListener('scroll', () => this.watchOnscroll());
    }
    watchOnscroll() {
        let scrollTop = document.getElementById("train-course").scrollTop;//滾動條捲去的高度
        let clientHeight = document.getElementById("train-course").clientHeight;//可視區域高度
        let scrollHeight = document.getElementById("train-course").scrollHeight;//元素總高度
        console.log(scrollTop, clientHeight, scrollHeight)
       if (scrollTop + clientHeight+1 >= scrollHeight) {//andriod少1px
            this.setState({
                getDataConfig: Object.assign({}, this.state.getDataConfig, {
                    pIndex: this.state.getDataConfig.pIndex + 1
                })
            }, () => this.getData())
        }
    }

    //獲取列表介面
    getData = () => {
        Toast.loading("loading...")
//這裡是自己調取介面的方法
        Base.GetAllCoursePage(this.state.getDataConfig).then(res => {
            if (res.Ret === 0) {
                Toast.hide()
                console.log(res.Data)
                if (this.state.getDataConfig.pIndex >= res.Data.Pages) {
                    Toast.fail("沒有更多資料")
                    return
                }
                if (this.state.getDataConfig.pIndex === 1) {
                    this.setState({
                        courseData: res.Data
                    })
                }else{
                    let arr =this.state.courseData.ViewModelList.concat(res.Data.ViewModelList)
                    this.setState({
                        courseData:Object.assign({},this.state.courseData,{
                            ViewModelList:arr
                        })
                    })
                }

            } else {
                console.log(res.Msg)
            }
        })
    }

    render() {
        const {courseData} = this.state
        return (
                <div className='train-course' id='train-course'>
                    {
                        courseData && courseData.ViewModelList.length !== 0 && courseData.ViewModelList.map((item, key) => {
//ViewModelList是請求回來的資料，是一個陣列
                            return (
                                <div className='list' key={item.ID}>
                                    <div className="left-logo">
                                        <img src={item.CoverImg} alt=""/>
                                    </div>
                                    <div className='right-content'>
                                        <p>{item.Name}</p>
                                        <p>這是一位可愛的寶寶</p>
                                        <p>時間：<span>2017年7月五號</span></p>
                                    </div>
                                </div>
                            )
                        })
                    }
                    {/*<div className='load'>可在此處設定其他載入中樣式</div>*/}
                </div>
        )
    }

}

export default TrianCourse;

css

.load{
  font-size: 0.3rem;
  text-align: center;
}
.train-course{
  height: 100vh;//必須小於所有列表總高度之和（如：一個列表的高度是20px,則10個列表就是200px,那麼滾動元素盒子的高度就必須小於200px）
  overflow: auto;
  .list{
    display: flex;
    font-size: 0.3rem;
    align-items: center;
    .left-logo{
      width:1.5rem;
      height: 1.5rem;
      padding: 0.3rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}

下次將列表頁進入詳情頁之後，返回時，記錄進入時的位置~~~