React 首页组件：轮播图、新闻列表和自适应布局

import React, { useState, useEffect, lazy } from 'react'; import HomeHeader from '@/component/HomeHeader'; import Newsitem from '@/component/Newsitem'; import NavBarAgain from '@/component/NavBarAgain'; import MySkeleton from '@/component/Skeleton'; import { Swiper, Image, Divider } from 'antd-mobile'; import { Link } from 'react-router-dom'; import _ from '@/assets/utils.js'; import '@/styles/home.less'; import http from '@/api/axios.js';

const Home = () => { const [bannerData, setBannerData] = useState([]);

useEffect(() => { (async () => { try { let { data } = await http('/swiper'); setBannerData(data); } catch (_) { // 捕获错误 } })(); }, []);

// 创建所需状态 let [today, setToday] = useState(_.GetDate()); let imgurl = 'http://localhost:3000/upload/';

return (

{bannerData.length > 0 ? ( {bannerData.map((item, index) => { return ( <Swiper.Item className='swiperitem' key={index}> <Link to={{ pathname: /detail/${item.news_id} }} > <Image src={imgurl + item.image} alt='' lazy />

{item.title}

作者: {item.hint}

</Swiper.Item> ); })} ) : null}

12月23

12月24

); };

export default Home;

/* 添加 CSS 样式，使盒子高度自适应内容 / .home_box { display: flex; flex-direction: column; height: 100vh; / 设置盒子高度为视口的高度 */ }

/* 也可以在 .news-list 或其他需要自适应的盒子添加相同的样式 / .news-list { display: flex; flex-direction: column; height: auto; / 高度自动调整 */ }

/* 其他样式 ... */

/* 使用 import 导入样式文件 */ import './home.less';