React 轮播图

徐同保2023-10-26 15:07

Index.js:

javascript 复制代码 
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import useList from './useList'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination } from 'swiper/modules'
import { SinglePageHeader } from '../../../../components/light'
import { Button, Skeleton } from 'antd'
import LazyLoad from 'react-lazy-load'

import 'swiper/css'
import 'swiper/css/pagination'
import './index.css'

function Index(props) {
  const {
    config,
    models,
    userInfo,
    routerSearchObj,
    imgList,
    handleJumpPage,
    handleTagClick,
    handleModelClick,
    handleImgDrawSameStyleClick,
  } = useList(props)
  return (
    <div className="m-welcome-wrap-box">
      <div className={`m-welcome-wrap-box-inner`}>
        <div className="m-welcome-wrap">
          {typeof routerSearchObj.type === 'undefined' ||
          routerSearchObj.type === '0' ? (
            <div className="m-welcome-header">
              <div className="m-welcome-header-title">学习</div>
              <div className="m-welcome-header-info"></div>
              <div className="m-welcome-header-right">
                {userInfo.avatarCdn ? (
                  <img
                    src={userInfo.avatarCdn}
                    className="m-welcome-avatar"
                    onClick={() => handleJumpPage('/ai/index/home/chatList')}
                    alt="头像"
                  ></img>
                ) : (
                  <>
                    <Button
                      type="link"
                      className="m-welcome-btn-text"
                      onClick={() => handleJumpPage('/ai/login')}
                    >
                      登录
                    </Button>
                    <Button
                      type="link"
                      className="m-welcome-btn-text"
                      onClick={() => handleJumpPage('/ai/register')}
                    >
                      注册
                    </Button>
                  </>
                )}
              </div>
            </div>
          ) : (
            <SinglePageHeader
              // goBackPath="/ai/index/home/chatList"
              title={'首页&AI绘画'}
            ></SinglePageHeader>
          )}

          <Swiper
            slidesPerView={1.1}
            spaceBetween={10}
            centeredSlides={true}
            pagination={{
              clickable: true,
            }}
            modules={[Pagination]}
            initialSlide={1}
            className="mySwiper"
          >
            {Array.isArray(config.carousel) && config.carousel.length > 0 ? (
              config.carousel.map((item) => (
                <SwiperSlide
                  key={item.id}
                  className={`m-welcome-carousel-item ${
                    typeof routerSearchObj.type === 'undefined' ||
                    routerSearchObj.type === '0'
                      ? 'withBorder'
                      : ''
                  }`}
                >
                  <div className="m-welcome-carousel-item-info">
                    <div
                      className="m-welcome-carouse-item-tag"
                      onClick={() => handleTagClick(item)}
                    >
                      {item.tag}
                    </div>
                    <div className="m-welcome-carouse-item-title">
                      {item.title}
                    </div>
                    <div className="m-welcome-carouse-item-sub-title">
                      {item.subTitle}
                    </div>
                  </div>
                  <div className="m-welcome-carousel-item-img-wrap">
                    <div
                      className="m-welcome-carousel-item-img"
                      style={{ backgroundImage: `url(${item.imgUrl})` }}
                    ></div>
                  </div>
                </SwiperSlide>
              ))
            ) : (
              <SwiperSlide>
                <Skeleton
                  avatar
                  paragraph={{
                    rows: 7,
                  }}
                  active
                  className="m-h5-lesson-play-skeleton"
                />
              </SwiperSlide>
            )}
          </Swiper>
          {/* models */}
          <div className="m-welcome-card-wrap">
            <div className="m-welcome-card-header-wrap">
              <div className="m-welcome-card-title-wrap">
                <div className="m-welcome-card-title">绘图大模型</div>
                <div
                  className="m-welcome-card-more"
                  onClick={() => handleJumpPage('/welcome/home/modelList')}
                >
                  查看全部
                </div>
              </div>
              <div className="m-welcome-card-sub-title">向左滑动 查看更多</div>
            </div>
            <Swiper
              slidesPerView={1.1}
              spaceBetween={10}
              centeredSlides={true}
              pagination={false}
              modules={[Pagination]}
              className="mySwiper"
            >
              {Array.isArray(models) && models.length > 0 ? (
                models.map((item) => (
                  <SwiperSlide
                    key={item.first.id}
                    className={`m-welcome-card-item`}
                  >
                    <div className={`m-welcome-card-item-row`}>
                      <LazyLoad className="m-welcome-card-item-img-wrap">
                        <img
                          src={item.first.avatar}
                          className="m-welcome-card-item-img"
                          alt="头像"
                        ></img>
                      </LazyLoad>
                      <div className="m-welcome-card-item-info-wrap withBorder">
                        <div className="m-welcome-card-item-info">
                          <div
                            className="m-welcome-card-item-title m-ellipsis"
                            title={item.first.name}
                          >
                            {item.first.name}
                          </div>
                          <div className="m-welcome-card-item-sub-title">
                            {item.first.id}
                          </div>
                        </div>
                        <div
                          className="m-welcome-card-item-btn"
                          onClick={() => handleModelClick(item.first)}
                        >
                          画同款
                        </div>
                      </div>
                    </div>
                    {item.second ? (
                      <div className={`m-welcome-card-item-row`}>
                        <LazyLoad className="m-welcome-card-item-img-wrap">
                          <img
                            src={item.second.avatar}
                            className="m-welcome-card-item-img"
                            alt="头像"
                          ></img>
                        </LazyLoad>
                        <div className="m-welcome-card-item-info-wrap withBorder">
                          <div className="m-welcome-card-item-info">
                            <div
                              className="m-welcome-card-item-title m-ellipsis"
                              title={item.second.name}
                            >
                              {item.second.name}
                            </div>
                            <div className="m-welcome-card-item-sub-title">
                              {item.second.id}
                            </div>
                          </div>
                          <div
                            className="m-welcome-card-item-btn"
                            onClick={() => handleModelClick(item.second)}
                          >
                            画同款
                          </div>
                        </div>
                      </div>
                    ) : null}
                    {item.third ? (
                      <div className={`m-welcome-card-item-row`}>
                        <LazyLoad className="m-welcome-card-item-img-wrap">
                          <img
                            src={item.third.avatar}
                            className="m-welcome-card-item-img"
                            alt="头像"
                          ></img>
                        </LazyLoad>
                        <div className="m-welcome-card-item-info-wrap">
                          <div className="m-welcome-card-item-info">
                            <div
                              className="m-welcome-card-item-title m-ellipsis"
                              title={item.third.name}
                            >
                              {item.third.name}
                            </div>
                            <div className="m-welcome-card-item-sub-title">
                              {item.third.id}
                            </div>
                          </div>
                          <div
                            className="m-welcome-card-item-btn"
                            onClick={() => handleModelClick(item.third)}
                          >
                            画同款
                          </div>
                        </div>
                      </div>
                    ) : null}
                  </SwiperSlide>
                ))
              ) : (
                <SwiperSlide>
                  <Skeleton
                    avatar
                    paragraph={{
                      rows: 7,
                    }}
                    active
                    className="m-h5-lesson-play-skeleton"
                  />
                </SwiperSlide>
              )}
            </Swiper>
          </div>
          <div className="m-welcome-card-wrap">
            <div className="m-welcome-card-header-wrap">
              <div className="m-welcome-card-title-wrap">
                <div className="m-welcome-card-title">AI绘画作品展示</div>
                <div
                  className="m-welcome-card-more"
                  onClick={() => handleJumpPage('/welcome/home/imgList')}
                >
                  查看全部
                </div>
              </div>
              <div className="m-welcome-card-sub-title">向左滑动 查看更多</div>
            </div>
            <Swiper
              slidesPerView={1.1}
              spaceBetween={10}
              centeredSlides={true}
              pagination={false}
              modules={[Pagination]}
              className="mySwiper"
            >
              {Array.isArray(imgList) && imgList.length > 0 ? (
                imgList.map((item) => (
                  <SwiperSlide
                    key={item.first.imgUid}
                    className={`m-welcome-card-item`}
                  >
                    <div className='m-welcome-img-row-wrap'>
                      <div className={`m-welcome-img-row`}>
                        <LazyLoad className="m-welcome-img-lazy-load first">
                          <div className="m-welcome-img-warp">
                            <img
                              src={item.first.imgUrlCdn}
                              className="m-welcome-img"
                              alt="图片"
                              onClick={() =>
                                handleImgDrawSameStyleClick(item.first)
                              }
                            ></img>
                          </div>
                        </LazyLoad>
                        <LazyLoad className="m-welcome-img-lazy-load">
                          <div className="m-welcome-img-warp">
                            <img
                              src={item.second.imgUrlCdn}
                              className="m-welcome-img"
                              alt="图片"
                              onClick={() =>
                                handleImgDrawSameStyleClick(item.second)
                              }
                            ></img>
                          </div>
                        </LazyLoad>
                      </div>
                      {/* <div className={`m-welcome-img-row`}>
                        <LazyLoad className="m-welcome-img-lazy-load">
                          <div className="m-welcome-img-warp">
                            <img
                              src={item.third.imgUrlCdn}
                              className="m-welcome-img"
                              alt="图片"
                              onClick={() =>
                                handleImgDrawSameStyleClick(item.third)
                              }
                            ></img>
                          </div>
                        </LazyLoad>
                        <LazyLoad className="m-welcome-img-lazy-load">
                          <div className="m-welcome-img-warp">
                            <img
                              src={item.fourth.imgUrlCdn}
                              className="m-welcome-img"
                              alt="图片"
                              onClick={() =>
                                handleImgDrawSameStyleClick(item.fourth)
                              }
                            ></img>
                          </div>
                        </LazyLoad>
                      </div> */}
                    </div>
                  </SwiperSlide>
                ))
              ) : (
                <SwiperSlide>
                  <Skeleton
                    avatar
                    paragraph={{
                      rows: 7,
                    }}
                    active
                    className="m-h5-lesson-play-skeleton"
                  />
                </SwiperSlide>
              )}
            </Swiper>
          </div>
        </div>
      </div>
    </div>
  )
}

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:

javascript 复制代码 
import { useState, useEffect } from 'react'
import Api from '../../../../api'
import { getRouterSearchObj } from '../../../../utils/tools'

export default function useList(props) {
  const [config, setConfig] = useState({})
  const [models, setModels] = useState([])
  const [userInfo, setUserInfo] = useState({})
  const [imgList, setImgList] = useState([])

  //获取路由参数
  const routerSearchObj = getRouterSearchObj(props)

  const handleGetConfig = () => {
    Api.h5.configWelcome().then((res) => {
      if (res.code === 200) {
        setConfig(res.data.config)
        let models = res.data.config.models
        if (Array.isArray(models)) {
          let tempModels = []
          for (let i = 0; i < models.length; i = i + 3) {
            tempModels = [
              ...tempModels,
              { first: models[i], second: models[i + 1], third: models[i + 2] },
            ]
          }
          setModels(tempModels)
        }
      }
    })
  }

  const handleImgSearch = () => {
    Api.h5
      .sdImgSearch({
        pageNum: 1,
        pageSize: 40,
      })
      .then((res) => {
        if (res.code === 200) {
          let list = res.data.list
          if (Array.isArray(list)) {
            let tempModels = []
            for (let i = 0; i < list.length; i = i + 2) {
              tempModels = [
                ...tempModels,
                {
                  first: list[i],
                  second: list[i + 1],
                  // third: list[i + 2],
                  // fourth: list[i + 3],
                },
              ]
            }
            setImgList(tempModels)
          }
        }
      })
  }

  const getUserInfo = () => {
    let token = localStorage.getItem('token')
    if (token) {
      Api.h5.userGetInfo({ isLoading: false }).then((res) => {
        if (res.code === 200) {
          setUserInfo(res.data)
        } else {
        }
      })
    }
  }

  //跳转
  const handleJumpPage = (path) => {
    // eslint-disable-next-line
    props.history.push(path)
  }

  const handleTagClick = () => {
    if (userInfo.avatarCdn) {
      props.history.push('/ai/index/home/chatList')
    } else {
      props.history.push('/ai/login')
    }
  }

  const handleModelClick = (item) => {
    props.history.push(
      `/single/home/sdSimple?modelId=${item.id}&name=${item.name}&link=${item.link}`
    )
  }

  const handleImgDrawSameStyleClick = (item) => {
    console.log(item)
    props.history.push(
      `/single/home/sdSimple?modelId=${item.id}&name=${item.name}&link=${item.link}&imgUid=${item.imgUid}`
    )
  }

  useEffect(() => {
    handleGetConfig()
    getUserInfo()
    handleImgSearch()
    // eslint-disable-next-line
  }, [])

  return {
    config,
    models,
    userInfo,
    routerSearchObj,
    imgList,
    handleJumpPage,
    handleTagClick,
    handleModelClick,
    handleImgDrawSameStyleClick,
  }
}

index.css:

css 复制代码 
.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;}
.m-welcome-wrap-box-inner{position: relative; display: flex;flex-direction: column; max-width: 800px;width: 100%;background: #ededed;}
.m-welcome-wrap{position: absolute;top: 0;bottom: 0;left: 0;right: 0; padding: 0 0 100px 0; overflow-y: auto;}
.m-welcome-header{display: flex; padding: 20px calc(4.5%) 0 calc(4.5%);align-items:center;margin: 0 0 5px 0;}
.m-welcome-header-title{font-size: 30px;font-weight: bold;}
.m-welcome-header-info{flex: 1}
.m-welcome-header-right{display: flex;align-items:center;}
.m-welcome-avatar{width: 40px;height: 40px;border-radius: 5px;cursor: pointer;}
.m-welcome-btn-text{margin: 0 5px 0 0;padding: 4px 0;}
.m-welcome-carousel-item{padding: 5px 0 0 0;}
.m-welcome-carousel-item.withBorder{border-top: 1px solid #ddd;}
.m-welcome-carousel-item-info{padding: 5px 0;}
.m-welcome-carouse-item-tag{font-size: 12px;color: #1677ff; height: 16px;line-height: 16px;cursor: pointer;}
.m-welcome-carouse-item-tag:hover{color: #0d6ef7;}
.m-welcome-carouse-item-title{font-size: 24px;color: #000; height: 32px;}
.m-welcome-carouse-item-sub-title{font-size: 22px;color: #999;height: 26px;}
.m-welcome-carousel-item-img-wrap{position: relative; width: 100%;padding: 64% 0 0 0;}
.m-welcome-carousel-item-img{position: absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: 5px; background-size: 100% 100%;}
.m-welcome-card-header-wrap{border-top: 1px solid #ddd; margin: 20px calc(4.5%) 0 calc(4.5%);}
.m-welcome-card-title-wrap{display: flex;align-items: center;padding: 5px 0 2px;}
.m-welcome-card-title{font-size: 22px;font-weight: bold;flex: 1;}
.m-welcome-card-more{font-size: 14px;color: #1677ff;cursor: pointer;}
.m-welcome-card-more:hover{color: #0d6ef7;}
.m-welcome-card-sub-title{font-size: 16px;color: #999;}
.m-welcome-card-item-row{display: flex;padding: 5px 0;align-items: center;}
.m-welcome-card-item-img-wrap{display: flex; width: 50px;height: 64px;background: #dddddd;}
.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;}
.m-welcome-card-item-img{position: absolute; width: 50px;height: 64px;border-radius: 5px;object-fit: cover;}
.m-welcome-card-item-info-wrap{height: 64px; flex: 1;display: flex;align-items: center; margin: 0 0 0 5px;overflow: hidden;}
.m-welcome-card-item-info-wrap.withBorder{border-bottom: 1px solid #ddd;}
.m-welcome-card-item-info{flex:1;padding: 0 4px 0 0; display:flex;flex-direction: column;justify-content: center;overflow: hidden;}
.m-welcome-card-item-title{font-size: 18px;color: #000;font-weight: bold;margin:  0 0 2px 0;}
.m-welcome-card-item-sub-title{font-size: 14px;color: #999;}
.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;}
.m-welcome-card-item-btn:hover{box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) ;}
.m-welcome-img-row-wrap{padding: 5px 0 0;}
.m-welcome-img-row{display: flex;align-items: center;}
.m-welcome-img-lazy-load{display: flex; position: relative; flex: 1; padding: 75% 0 0;border-radius: 5px; background: #dddddd;}
.m-welcome-img-lazy-load.first{margin: 0 5px 0 0;}
/* .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;} */
.m-welcome-img-warp{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.m-welcome-img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}

效果图：

https://swiperjs.com/demos

参考链接：

https://chat.xutongbao.top/

相关推荐
乱码三千8 分钟前
密码管理工具站正式上线啦
前端·html·github
IMPYLH14 分钟前
HTML 的 ＜rt＞ 元素
前端·html
单线程_0119 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js
mldong8 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器：npm 装包，10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排8 小时前
什么是 RAG？如何用 RAG 实现一个用户记忆？
前端·后端·ai编程
passerby60619 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角10 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼！10 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰10 小时前
迷茫焦虑期，我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi12 小时前
Vue2 组件通讯（三）：全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08ZCode 周末送额度活动开启：3 亿 Token 免费领取09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费