实现每次进入购车页面只加载指定的商品个数

目录

1.首先下载组件

2.引入用到的组件

3.代码展示

---

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
  })
})