目录
1.首先下载组件
$ npm install --save antd-mobile
# or
$ yarn add antd-mobile
# or
$ pnpm add antd-mobile
2.引入用到的组件
import { InfiniteScroll, List } from 'antd-mobile'
3.代码展示
const [hasMore, setHasMore] = useState(true)
const [page, setpage] = useState(4)
const loadMore = async () => {
const { data } = await axios.get('http://localhost:3001/shoplist')
// console.log(data,'222')
const dd = data.arr.splice(0, page)
setlist(dd)
if (page <= data.total.length) {
setTimeout(() => {
setpage(page + 4)
}, 3000)
} else {
setHasMore(false)
}
}
<List>
{
list.map(item => {
return (
<div key={item._id}>
<p>{item.name}</p>
</div>
)
})
}
</List>
<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
router.get('/shoplist', async (req, res) => {
const data = await shopModel.find().lean()
const total=await shopModel.find()
const arr = []
const obj = {}
data.forEach(item => {
obj[item._id] = item
})
data.forEach(item => {
if (!item['pid']) {
arr.push(item)
} else {
if (!obj[item['pid']]['children']) {
obj[item['pid']]['children'] = []
}
obj[item['pid']]['children'].push(item)
}
})
res.send({
arr,
total
})
})