全部商品列表 - 优质商品推荐

import React, { Component } from 'react'; import axios from 'axios'; import './alllist.css'

export default class AllList extends Component { constructor() { super() this.state = { AllListlist: [], AllListif: false, } this.page = 1; this.total = 0; } componentDidMount() { axios.get('/getCategoryPrdList?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&cid=98&pageNumber=1&pagesize=20&sortField=default&sortType=desc&cidLevel=1').then(res => { console.log('res1', res.data); this.total = res.data.totalPage this.meDate(); this.onScrollFn(); }) } meDate = () => { console.log(this.total); if (this.total >= this.page) { axios.get( '/getCategoryPrdList?portal=21&version=350&lang=zh-CN&country=CNQX&_areacode=CNQX&beCode=CNQX&cid=98&pageNumber=' + this.page + '&pagesize=20&sortField=default&sortType=desc&cidLevel=1' ).then(res => { console.log('res2', res); let data = res.data.cidPrdMap[98]; this.setState({ AllListlist: [...this.state.AllListlist, ...data] }, () => { console.log(this.state); }) }) } } onScrollFn = () => { window.onscroll = () => { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let windowHeight = document.documentElement.clientHeight; let scrollHeight = document.body.scrollHeight; if (scrollHeight - scrollTop <= windowHeight) { console.log('到底了'); ++this.page; // 更改为先加1再判断 if (this.page === this.total) { this.setState({ AllListif: true }) } this.meDate() } } } componentWillUnmount() { window.onscroll = null; } render() { let { AllListif, AllListlist } = this.state return (

全部商品

综合

新品

评价

价格

{ AllListlist.map((item, index) =>

{item.disPrdName}

{item.prdBriefName}

${item.promPrice}

                        </div>
                    </div>)
                }
            </div>
            {
                AllListif ? <div className='alllist-9'>数据加完唠</div> : this.page + 1
            }
        </div>
    )
}

}

原文地址: https://www.cveoy.top/t/topic/n7Ot 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录