• React 轮播图

    Index.js:

    1. import React from 'react'
    2. import { connect } from 'react-redux'
    3. import { withRouter } from 'react-router-dom'
    4. import useList from './useList'
    5. import { Swiper, SwiperSlide } from 'swiper/react'
    6. import { Pagination } from 'swiper/modules'
    7. import { SinglePageHeader } from '../../../../components/light'
    8. import { Button, Skeleton } from 'antd'
    9. import LazyLoad from 'react-lazy-load'
    10.  
    11. import 'swiper/css'
    12. import 'swiper/css/pagination'
    13. import './index.css'
    14.  
    15. function Index(props) {
    16.   const {
    17.     config,
    18.     models,
    19.     userInfo,
    20.     routerSearchObj,
    21.     imgList,
    22.     handleJumpPage,
    23.     handleTagClick,
    24.     handleModelClick,
    25.     handleImgDrawSameStyleClick,
    26.   } = useList(props)
    27.   return (
    28.     <div className="m-welcome-wrap-box">
    29.       <div className={`m-welcome-wrap-box-inner`}>
    30.         <div className="m-welcome-wrap">
    31.           {typeof routerSearchObj.type === 'undefined' ||
    32.           routerSearchObj.type === '0' ? (
    33.             <div className="m-welcome-header">
    34.               <div className="m-welcome-header-title">学习div>
    35.               <div className="m-welcome-header-info">div>
    36.               <div className="m-welcome-header-right">
    37.                 {userInfo.avatarCdn ? (
    38.                   <img
    39.                     src={userInfo.avatarCdn}
    40.                     className="m-welcome-avatar"
    41.                     onClick={() => handleJumpPage('/ai/index/home/chatList')}
    42.                     alt="头像"
    43.                   >img>
    44.                 ) : (
    45.                   <>
    46.                     <Button
    47.                       type="link"
    48.                       className="m-welcome-btn-text"
    49.                       onClick={() => handleJumpPage('/ai/login')}
    50.                     >
    51.                       登录
    52.                     Button>
    53.                     <Button
    54.                       type="link"
    55.                       className="m-welcome-btn-text"
    56.                       onClick={() => handleJumpPage('/ai/register')}
    57.                     >
    58.                       注册
    59.                     Button>
    60.                   
    61.                 )}
    62.               div>
    63.             div>
    64.           ) : (
    65.             <SinglePageHeader
    66.               // goBackPath="/ai/index/home/chatList"
    67.               title={'首页&AI绘画'}
    68.             >SinglePageHeader>
    69.           )}
    70.  
    71.           <Swiper
    72.             slidesPerView={1.1}
    73.             spaceBetween={10}
    74.             centeredSlides={true}
    75.             pagination={{
    76.               clickable: true,
    77.             }}
    78.             modules={[Pagination]}
    79.             initialSlide={1}
    80.             className="mySwiper"
    81.           >
    82.             {Array.isArray(config.carousel) && config.carousel.length > 0 ? (
    83.               config.carousel.map((item) => (
    84.                 <SwiperSlide
    85.                   key={item.id}
    86.                   className={`m-welcome-carousel-item ${
    87.                     typeof routerSearchObj.type === 'undefined' ||
    88.                     routerSearchObj.type === '0'
    89.                       ? 'withBorder'
    90.                       : ''
    91.                   }`}
    92.                 >
    93.                   <div className="m-welcome-carousel-item-info">
    94.                     <div
    95.                       className="m-welcome-carouse-item-tag"
    96.                       onClick={() => handleTagClick(item)}
    97.                     >
    98.                       {item.tag}
    99.                     div>
    100.                     <div className="m-welcome-carouse-item-title">
    101.                       {item.title}
    102.                     div>
    103.                     <div className="m-welcome-carouse-item-sub-title">
    104.                       {item.subTitle}
    105.                     div>
    106.                   div>
    107.                   <div className="m-welcome-carousel-item-img-wrap">
    108.                     <div
    109.                       className="m-welcome-carousel-item-img"
    110.                       style={{ backgroundImage: `url(${item.imgUrl})` }}
    111.                     >div>
    112.                   div>
    113.                 SwiperSlide>
    114.               ))
    115.             ) : (
    116.               <SwiperSlide>
    117.                 <Skeleton
    118.                   avatar
    119.                   paragraph={{
    120.                     rows: 7,
    121.                   }}
    122.                   active
    123.                   className="m-h5-lesson-play-skeleton"
    124.                 />
    125.               SwiperSlide>
    126.             )}
    127.           Swiper>
    128.           {/* models */}
    129.           <div className="m-welcome-card-wrap">
    130.             <div className="m-welcome-card-header-wrap">
    131.               <div className="m-welcome-card-title-wrap">
    132.                 <div className="m-welcome-card-title">绘图大模型div>
    133.                 <div
    134.                   className="m-welcome-card-more"
    135.                   onClick={() => handleJumpPage('/welcome/home/modelList')}
    136.                 >
    137.                   查看全部
    138.                 div>
    139.               div>
    140.               <div className="m-welcome-card-sub-title">向左滑动 查看更多div>
    141.             div>
    142.             <Swiper
    143.               slidesPerView={1.1}
    144.               spaceBetween={10}
    145.               centeredSlides={true}
    146.               pagination={false}
    147.               modules={[Pagination]}
    148.               className="mySwiper"
    149.             >
    150.               {Array.isArray(models) && models.length > 0 ? (
    151.                 models.map((item) => (
    152.                   <SwiperSlide
    153.                     key={item.first.id}
    154.                     className={`m-welcome-card-item`}
    155.                   >
    156.                     <div className={`m-welcome-card-item-row`}>
    157.                       <LazyLoad className="m-welcome-card-item-img-wrap">
    158.                         <img
    159.                           src={item.first.avatar}
    160.                           className="m-welcome-card-item-img"
    161.                           alt="头像"
    162.                         >img>
    163.                       LazyLoad>
    164.                       <div className="m-welcome-card-item-info-wrap withBorder">
    165.                         <div className="m-welcome-card-item-info">
    166.                           <div
    167.                             className="m-welcome-card-item-title m-ellipsis"
    168.                             title={item.first.name}
    169.                           >
    170.                             {item.first.name}
    171.                           div>
    172.                           <div className="m-welcome-card-item-sub-title">
    173.                             {item.first.id}
    174.                           div>
    175.                         div>
    176.                         <div
    177.                           className="m-welcome-card-item-btn"
    178.                           onClick={() => handleModelClick(item.first)}
    179.                         >
    180.                           画同款
    181.                         div>
    182.                       div>
    183.                     div>
    184.                     {item.second ? (
    185.                       <div className={`m-welcome-card-item-row`}>
    186.                         <LazyLoad className="m-welcome-card-item-img-wrap">
    187.                           <img
    188.                             src={item.second.avatar}
    189.                             className="m-welcome-card-item-img"
    190.                             alt="头像"
    191.                           >img>
    192.                         LazyLoad>
    193.                         <div className="m-welcome-card-item-info-wrap withBorder">
    194.                           <div className="m-welcome-card-item-info">
    195.                             <div
    196.                               className="m-welcome-card-item-title m-ellipsis"
    197.                               title={item.second.name}
    198.                             >
    199.                               {item.second.name}
    200.                             div>
    201.                             <div className="m-welcome-card-item-sub-title">
    202.                               {item.second.id}
    203.                             div>
    204.                           div>
    205.                           <div
    206.                             className="m-welcome-card-item-btn"
    207.                             onClick={() => handleModelClick(item.second)}
    208.                           >
    209.                             画同款
    210.                           div>
    211.                         div>
    212.                       div>
    213.                     ) : null}
    214.                     {item.third ? (
    215.                       <div className={`m-welcome-card-item-row`}>
    216.                         <LazyLoad className="m-welcome-card-item-img-wrap">
    217.                           <img
    218.                             src={item.third.avatar}
    219.                             className="m-welcome-card-item-img"
    220.                             alt="头像"
    221.                           >img>
    222.                         LazyLoad>
    223.                         <div className="m-welcome-card-item-info-wrap">
    224.                           <div className="m-welcome-card-item-info">
    225.                             <div
    226.                               className="m-welcome-card-item-title m-ellipsis"
    227.                               title={item.third.name}
    228.                             >
    229.                               {item.third.name}
    230.                             div>
    231.                             <div className="m-welcome-card-item-sub-title">
    232.                               {item.third.id}
    233.                             div>
    234.                           div>
    235.                           <div
    236.                             className="m-welcome-card-item-btn"
    237.                             onClick={() => handleModelClick(item.third)}
    238.                           >
    239.                             画同款
    240.                           div>
    241.                         div>
    242.                       div>
    243.                     ) : null}
    244.                   SwiperSlide>
    245.                 ))
    246.               ) : (
    247.                 <SwiperSlide>
    248.                   <Skeleton
    249.                     avatar
    250.                     paragraph={{
    251.                       rows: 7,
    252.                     }}
    253.                     active
    254.                     className="m-h5-lesson-play-skeleton"
    255.                   />
    256.                 SwiperSlide>
    257.               )}
    258.             Swiper>
    259.           div>
    260.           <div className="m-welcome-card-wrap">
    261.             <div className="m-welcome-card-header-wrap">
    262.               <div className="m-welcome-card-title-wrap">
    263.                 <div className="m-welcome-card-title">AI绘画作品展示div>
    264.                 <div
    265.                   className="m-welcome-card-more"
    266.                   onClick={() => handleJumpPage('/welcome/home/imgList')}
    267.                 >
    268.                   查看全部
    269.                 div>
    270.               div>
    271.               <div className="m-welcome-card-sub-title">向左滑动 查看更多div>
    272.             div>
    273.             <Swiper
    274.               slidesPerView={1.1}
    275.               spaceBetween={10}
    276.               centeredSlides={true}
    277.               pagination={false}
    278.               modules={[Pagination]}
    279.               className="mySwiper"
    280.             >
    281.               {Array.isArray(imgList) && imgList.length > 0 ? (
    282.                 imgList.map((item) => (
    283.                   <SwiperSlide
    284.                     key={item.first.imgUid}
    285.                     className={`m-welcome-card-item`}
    286.                   >
    287.                     <div className='m-welcome-img-row-wrap'>
    288.                       <div className={`m-welcome-img-row`}>
    289.                         <LazyLoad className="m-welcome-img-lazy-load first">
    290.                           <div className="m-welcome-img-warp">
    291.                             <img
    292.                               src={item.first.imgUrlCdn}
    293.                               className="m-welcome-img"
    294.                               alt="图片"
    295.                               onClick={() =>
    296.                                 handleImgDrawSameStyleClick(item.first)
    297.                               }
    298.                             >img>
    299.                           div>
    300.                         LazyLoad>
    301.                         <LazyLoad className="m-welcome-img-lazy-load">
    302.                           <div className="m-welcome-img-warp">
    303.                             <img
    304.                               src={item.second.imgUrlCdn}
    305.                               className="m-welcome-img"
    306.                               alt="图片"
    307.                               onClick={() =>
    308.                                 handleImgDrawSameStyleClick(item.second)
    309.                               }
    310.                             >img>
    311.                           div>
    312.                         LazyLoad>
    313.                       div>
    314.                       {/* <div className={`m-welcome-img-row`}>
    315.                         <LazyLoad className="m-welcome-img-lazy-load">
    316.                           <div className="m-welcome-img-warp">
    317.                             <img
    318.                               src={item.third.imgUrlCdn}
    319.                               className="m-welcome-img"
    320.                               alt="图片"
    321.                               onClick={() =>
    322.                                 handleImgDrawSameStyleClick(item.third)
    323.                               }
    324.                             >img>
    325.                           div>
    326.                         LazyLoad>
    327.                         <LazyLoad className="m-welcome-img-lazy-load">
    328.                           <div className="m-welcome-img-warp">
    329.                             <img
    330.                               src={item.fourth.imgUrlCdn}
    331.                               className="m-welcome-img"
    332.                               alt="图片"
    333.                               onClick={() =>
    334.                                 handleImgDrawSameStyleClick(item.fourth)
    335.                               }
    336.                             >img>
    337.                           div>
    338.                         LazyLoad>
    339.                       div> */}
    340.                     div>
    341.                   SwiperSlide>
    342.                 ))
    343.               ) : (
    344.                 <SwiperSlide>
    345.                   <Skeleton
    346.                     avatar
    347.                     paragraph={{
    348.                       rows: 7,
    349.                     }}
    350.                     active
    351.                     className="m-h5-lesson-play-skeleton"
    352.                   />
    353.                 SwiperSlide>
    354.               )}
    355.             Swiper>
    356.           div>
    357.         div>
    358.       div>
    359.
  • )
  • }
  • const mapStateToProps = (state) => {
  • return {
  • collapsed: state.getIn(['light', 'collapsed']),
  • }
  • }
  • const mapDispatchToProps = (dispatch) => {
  • return {
  • onSetState(key, value) {
  • dispatch({ type: 'SET_LIGHT_STATE', key, value })
  • },
  • onDispatch(action) {
  • dispatch(action)
  • },
  • }
  • }
  • export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index))

    • useList.js:

    1. import { useState, useEffect } from 'react'
    2. import Api from '../../../../api'
    3. import { getRouterSearchObj } from '../../../../utils/tools'
    4.  
    5. export default function useList(props) {
    6.   const [config, setConfig] = useState({})
    7.   const [models, setModels] = useState([])
    8.   const [userInfo, setUserInfo] = useState({})
    9.   const [imgList, setImgList] = useState([])
    10.  
    11.   //获取路由参数
    12.   const routerSearchObj = getRouterSearchObj(props)
    13.  
    14.   const handleGetConfig = () => {
    15.     Api.h5.configWelcome().then((res) => {
    16.       if (res.code === 200) {
    17.         setConfig(res.data.config)
    18.         let models = res.data.config.models
    19.         if (Array.isArray(models)) {
    20.           let tempModels = []
    21.           for (let i = 0; i < models.length; i = i + 3) {
    22.             tempModels = [
    23.               ...tempModels,
    24.               { first: models[i], second: models[i + 1], third: models[i + 2] },
    25.             ]
    26.           }
    27.           setModels(tempModels)
    28.         }
    29.       }
    30.     })
    31.   }
    32.  
    33.   const handleImgSearch = () => {
    34.     Api.h5
    35.       .sdImgSearch({
    36.         pageNum: 1,
    37.         pageSize: 40,
    38.       })
    39.       .then((res) => {
    40.         if (res.code === 200) {
    41.           let list = res.data.list
    42.           if (Array.isArray(list)) {
    43.             let tempModels = []
    44.             for (let i = 0; i < list.length; i = i + 2) {
    45.               tempModels = [
    46.                 ...tempModels,
    47.                 {
    48.                   first: list[i],
    49.                   second: list[i + 1],
    50.                   // third: list[i + 2],
    51.                   // fourth: list[i + 3],
    52.                 },
    53.               ]
    54.             }
    55.             setImgList(tempModels)
    56.           }
    57.         }
    58.       })
    59.   }
    60.  
    61.   const getUserInfo = () => {
    62.     let token = localStorage.getItem('token')
    63.     if (token) {
    64.       Api.h5.userGetInfo({ isLoading: false }).then((res) => {
    65.         if (res.code === 200) {
    66.           setUserInfo(res.data)
    67.         } else {
    68.         }
    69.       })
    70.     }
    71.   }
    72.  
    73.   //跳转
    74.   const handleJumpPage = (path) => {
    75.     // eslint-disable-next-line
    76.     props.history.push(path)
    77.   }
    78.  
    79.   const handleTagClick = () => {
    80.     if (userInfo.avatarCdn) {
    81.       props.history.push('/ai/index/home/chatList')
    82.     } else {
    83.       props.history.push('/ai/login')
    84.     }
    85.   }
    86.  
    87.   const handleModelClick = (item) => {
    88.     props.history.push(
    89.       `/single/home/sdSimple?modelId=${item.id}&name=${item.name}&link=${item.link}`
    90.     )
    91.   }
    92.  
    93.   const handleImgDrawSameStyleClick = (item) => {
    94.     console.log(item)
    95.     props.history.push(
    96.       `/single/home/sdSimple?modelId=${item.id}&name=${item.name}&link=${item.link}&imgUid=${item.imgUid}`
    97.     )
    98.   }
    99.  
    100.   useEffect(() => {
    101.     handleGetConfig()
    102.     getUserInfo()
    103.     handleImgSearch()
    104.     // eslint-disable-next-line
    105.   }, [])
    106.  
    107.   return {
    108.     config,
    109.     models,
    110.     userInfo,
    111.     routerSearchObj,
    112.     imgList,
    113.     handleJumpPage,
    114.     handleTagClick,
    115.     handleModelClick,
    116.     handleImgDrawSameStyleClick,
    117.   }
    118. }

    index.css:

    1. .m-welcome-wrap-box{display: flex;justify-content: center;background: #ddd;background: #ddd;position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;}
    2. .m-welcome-wrap-box-inner{position: relative; display: flex;flex-direction: column; max-width: 800px;width: 100%;background: #ededed;}
    3. .m-welcome-wrap{position: absolute;top: 0;bottom: 0;left: 0;right: 0; padding: 0 0 100px 0; overflow-y: auto;}
    4. .m-welcome-header{display: flex; padding: 20px calc(4.5%) 0 calc(4.5%);align-items:center;margin: 0 0 5px 0;}
    5. .m-welcome-header-title{font-size: 30px;font-weight: bold;}
    6. .m-welcome-header-info{flex: 1}
    7. .m-welcome-header-right{display: flex;align-items:center;}
    8. .m-welcome-avatar{width: 40px;height: 40px;border-radius: 5px;cursor: pointer;}
    9. .m-welcome-btn-text{margin: 0 5px 0 0;padding: 4px 0;}
    10. .m-welcome-carousel-item{padding: 5px 0 0 0;}
    11. .m-welcome-carousel-item.withBorder{border-top: 1px solid #ddd;}
    12. .m-welcome-carousel-item-info{padding: 5px 0;}
    13. .m-welcome-carouse-item-tag{font-size: 12px;color: #1677ff; height: 16px;line-height: 16px;cursor: pointer;}
    14. .m-welcome-carouse-item-tag:hover{color: #0d6ef7;}
    15. .m-welcome-carouse-item-title{font-size: 24px;color: #000; height: 32px;}
    16. .m-welcome-carouse-item-sub-title{font-size: 22px;color: #999;height: 26px;}
    17. .m-welcome-carousel-item-img-wrap{position: relative; width: 100%;padding: 64% 0 0 0;}
    18. .m-welcome-carousel-item-img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: 5px; background-size: 100% 100%;}
    19. .m-welcome-card-header-wrap{border-top: 1px solid #ddd; margin: 20px calc(4.5%) 0 calc(4.5%);}
    20. .m-welcome-card-title-wrap{display: flex;align-items: center;padding: 5px 0 2px;}
    21. .m-welcome-card-title{font-size: 22px;font-weight: bold;flex: 1;}
    22. .m-welcome-card-more{font-size: 14px;color: #1677ff;cursor: pointer;}
    23. .m-welcome-card-more:hover{color: #0d6ef7;}
    24. .m-welcome-card-sub-title{font-size: 16px;color: #999;}
    25. .m-welcome-card-item-row{display: flex;padding: 5px 0;align-items: center;}
    26. .m-welcome-card-item-img-wrap{display: flex; width: 50px;height: 64px;background: #dddddd;}
    27. .m-welcome-card-item-img-wrap::before{content: '';margin: auto;width: 22px;height: 22px;background-image: url(../../../../static/images/loading.png);background-size: 100% 100%; animation: loading 0.5s linear infinite;}
    28. .m-welcome-card-item-img{position: absolute; width: 50px;height: 64px;border-radius: 5px;object-fit: cover;}
    29. .m-welcome-card-item-info-wrap{height: 64px; flex: 1;display: flex;align-items: center; margin: 0 0 0 5px;overflow: hidden;}
    30. .m-welcome-card-item-info-wrap.withBorder{border-bottom: 1px solid #ddd;}
    31. .m-welcome-card-item-info{flex:1;padding: 0 4px 0 0; display:flex;flex-direction: column;justify-content: center;overflow: hidden;}
    32. .m-welcome-card-item-title{font-size: 18px;color: #000;font-weight: bold;margin:  0 0 2px 0;}
    33. .m-welcome-card-item-sub-title{font-size: 14px;color: #999;}
    34. .m-welcome-card-item-btn{padding: 0 20px;background: #ddd;color: #1677ff;font-weight: bold;letter-spacing: 2px;font-size: 16px; border-radius: 15px;text-align: center;height: 30px; line-height: 32px;cursor: pointer;}
    35. .m-welcome-card-item-btn:hover{box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) ;}
    36. .m-welcome-img-row-wrap{padding: 5px 0 0;}
    37. .m-welcome-img-row{display: flex;align-items: center;}
    38. .m-welcome-img-lazy-load{display: flex; position: relative; flex: 1; padding: 75% 0 0;border-radius: 5px; background: #dddddd;}
    39. .m-welcome-img-lazy-load.first{margin: 0 5px 0 0;}
    40. /* .m-welcome-card-item-img-big-wrap::before{content: '';margin: auto;width: 22px;height: 22px;background-image: url(../../../../static/images/loading.png);background-size: 100% 100%; animation: loading 0.5s linear infinite;} */
    41. .m-welcome-img-warp{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
    42. .m-welcome-img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}
    43.  
    44.  
    45.  
    46.  
    47.  
    48.

    效果图：

    https://swiperjs.com/demos

    参考链接：

    https://chat.xutongbao.top/

  • 相关阅读:
    JavaScript系列从入门到精通系列第十五篇：JavaScript中函数的实参介绍返回值介绍以及函数的立即执行
    【附源码】计算机毕业设计SSM腾讯网游辅助小助手
    httpprompt.ml靶场练习
    【iOS】ViewController的生命周期
    学习经验分享之十二：如何撰写论文
    .NET 发布，部署和运行应用程序
    JDBC知识点
    Azure Data Factory（十一）Data Flow 的使用解析
    Flutter Event 派发
    数据结构高阶--AVL（平衡二叉树）（图解+实现）
  • 原文地址：https://blog.csdn.net/xutongbao/article/details/134039039