react 使用 antd-mobile组件库实现下滑加载数据

简介: react 使用 antd-mobile组件库实现下滑加载数据

在许多的应用场景中都会存在的功能点,在商品列表展示时,所展示的仅仅是一部分数据,并非是完全展示,在存在大量数据时展示的所有的会导致页面渲染缓慢的问题,所以都是通过功能触发,增加更多的数据展示

第一步:

npm i antd-mobile  //引入组件库

import { InfiniteScroll, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'

使用InfiniteScroll组件,sleep实现计时效果

const [hasMore, setHasMore] = useState(true) //判断是否还有数据需要进行加载
const [sedlist, setSedlist] = useState([])   //数据集合
  async function loadMore() {
    const append = await mockRequest()
    setSedlist(val => [...val, ...append])
    setHasMore(append.length > 0)
  }
  const [count, setCount] = useState(0)
  async function mockRequest() {
    if (count >= 3) {
      return []
    }
    var datas = []
    axios.get("http://localhost:3010/shopedlist?keyname=" + knamed).then(data => {
      console.log('data.data.data.channels', data.data.data)
      // setToplisted([...data.data.data.channels])
      datas = data.data.data.slice(count * 5, (count + 1) * 5)
    })
    await sleep(1000)
    let num = count
    num++
    setCount(num)
    return datas
  }
<div className='searedlist'>
        {sedlist.map(item => {
          return (
            <div className='sitem' key={item._id} onClick={() => godetails(item)}>
              <div className='itimg'>
                <img src={item.simg[0]} />
              </div>
              <div className='itcon'>
                <p>{item.sname}</p>
                <span>¥{item.price}</span>
              </div>
            </div>
          )
        })}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
相关文章
|
8天前
|
前端开发
react按需引入antd-mobile
react按需引入antd-mobile
33 0
|
8天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
53 0
|
6天前
|
前端开发
掌握React中的useContext:访问父组件数据的神奇技巧
掌握React中的useContext:访问父组件数据的神奇技巧
|
8天前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
24 0
|
8天前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
17 0
|
8天前
|
前端开发
React组件通信:如何优雅地实现组件间的数据传递
React组件通信:如何优雅地实现组件间的数据传递
24 0
|
8天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
34 2
|
8天前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
19 1
|
8天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
24 0
|
8天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理

热门文章

最新文章