React 底部加载组件(基于antd)

来都来了_2024-12-21 12:08

底部加载组件的意义在于提供一种流畅的用户体验，以便在用户滚动到页面底部时自动加载更多内容。这样可以让用户无需离开当前页面，就能够无缝地浏览更多的内容.通过底部加载组件，可以分批加载页面内容，减少一次性加载大量数据对页面性能的影响。这样可以提高页面的加载速度和响应时间

javascript 复制代码

import React from 'react'
import { Mask } from 'antd-mobile'
import './index.less'

interface HouseCardProps {
  message: string
}

export default function PageLoading({
  message,
}: HouseCardProps) {
  return (
    <Mask visible className="loading-wrap" color="rgba(0, 0, 0, 0.6)">
      <div className="loading">
        {message}
      </div>
    </Mask>
  )
}

css 复制代码

.loading-wrap {
  .adm-mask-content {
    width: 100%;
    height: 100%;
  }
  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
  }
}