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