1.第一种方式：
import React, { useEffect, useState } from 'react'
import { ProductCard, PullRefresh, Toast, List } from 'react-vant';
import axios from 'axios'
// 模拟异步请求
async function getData(throwError) {
return new Promise((resolve, reject) => {
setTimeout(async() => {
if (throwError) {
reject(new Error('error'))
}
resolve((await axios.get('http://127.0.0.1:3010/getGoods')).data.data)
}, 2000)
})
}
export default function Hot() {
const [list, setList] = useState([])
const [finished, setFinished] = useState(false)
const [count,setCount] = useState(-1)
let pagesize = 5
const onLoadRefresh = async() => {
setCount(count+1)
const data = await getData()
if(count>=data.length/pagesize){
setCount(-1)
setList([])
}else{
setCount(count+1)
}
let oldData = [...list]
let newData = data.slice((count-1)pagesize,countpagesize)
const newList = [...newData,...oldData]
// if (newList.length >= 12) {
// setFinished(true)
// }
setList(newList)
}
const onRefresh = (showToast) => {
return new Promise( async resolve => {
setTimeout(() => {
if (showToast) {
Toast.info('刷新成功')
}else{
Toast.info('没有数据了')
}
resolve(true)
}, 1000)
})
}
return (
<div style={{ height: '100%' }} >
<PullRefresh
onRefresh={() => onRefresh(true)}
onRefreshEnd={() => console.log('onRefreshEnd')}
>
<div style={{ height: '900px' }}>
{list.map((item, i) => (
<ProductCard
tag="标签"
num="2"
price="2.00"
originPrice="10.00"
desc="描述信息"
title={item.name}
thumb="img.yzcdn.cn/vant/ipad.j…"
/>
))}
)
}
2.第二种方式:
import React, { useEffect, useState } from 'react'
import { ProductCard, PullRefresh, Toast, List } from 'react-vant';
import axios from 'axios'
import './index.scss'
// redux
import { changeCount } from '../../../../store/slice/hot'
import { connect } from 'react-redux';
function Hot(props) {
const [zong,setZong] = useState([])
const [list, setList] = useState([])
const [finished, setFinished] = useState(false)
const [count,setCount] = useState(1)
const [pageSize,setPageSize] = useState(6)
// 模拟异步请求
async function getData(throwError) {
return new Promise((resolve, reject) => {
setTimeout(async () => {
if (throwError) {
reject(new Error('error'))
}
let zong = (await axios.get('http://127.0.0.1:3010/getGoods')).data.data
setZong([...zong])
resolve(zong.slice((count - 1) * pageSize, count * pageSize))
}, 2000)
})
}
const onLoadRefresh = async (isRefresh) => {
// props.changeCount(count)
// 新数据
const data = await getData()
if (count <= 3) {
setCount(count+1)
} else {
Toast.info('没有数据了')
}
setList(v => {
const newList = isRefresh ? data : [...data,...list]
// setFinished(true)
return newList
})
}
const onRefresh = async () => {
setFinished(false)
await onLoadRefresh(1)
}
console.log(finished,'finished');
return (
<PullRefresh
onRefresh={() => onRefresh(true)}
>
{/* 通过finished来控制是否需要再触发load事件，去加载 */}
{list.map((item, i) => (
<ProductCard
tag="标签"
num="2"
price="2.00"
originPrice="10.00"
desc="描述信息"
title={item.name}
thumb="img.yzcdn.cn/vant/ipad.j…"
/>
))}
)
}
const mapStateFromProps = state => {
return {
// count:state.hot.count
}
}
const mapDispatchFromProps = dispatch => {
return {
changeCount(count) {
dispatch(changeCount(count))
}
}
}
export default connect(mapStateFromProps, mapDispatchFromProps)(Hot)
