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/

相关推荐
励志成为大佬的小杨34 分钟前
c语言中的枚举类型
java·c语言·前端
罗_三金42 分钟前
微信小程序打印生产环境日志
javascript·微信小程序·小程序·bug
shuishen491 小时前
Web Bluetooth API 开发记录
javascript·web·js
前端熊猫1 小时前
Element Plus 日期时间选择器大于当天时间置灰
前端·javascript·vue.js
傻小胖1 小时前
React 组件通信完整指南 以及 自定义事件发布订阅系统
前端·javascript·react.js
JaxNext1 小时前
开发 AI 应用的无敌配方，半小时手搓学英语利器
前端·javascript·aigc
万亿少女的梦1681 小时前
高校网络安全存在的问题与对策研究
java·开发语言·前端·网络·数据库·python
Python私教2 小时前
Vue3中的`ref`与`reactive`：定义、区别、适用场景及总结
前端·javascript·vue.js
CQU_JIAKE2 小时前
12.12【java exp4】react table全局搜索tailwindcss 布局 (Layout) css美化 3. (rowId: number
前端·javascript·react.js
wayhome在哪2 小时前
从 Vue 2 到 Vue 3：用一个 Todos 组件见证前端框架的华丽变身 🚀
javascript·vue.js·前端框架
热门推荐
01新手学习VR全景需要知道的几个问题02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03玄机平台应急响应—webshell查杀04docker安装启动问题解决排查05【一文读懂】NTN（非地面网络）技术介绍06HCIA-datacom数通题库和录播视频资料07Gitlab ci/cd08RAG 实践- Ollama+RagFlow 部署本地知识库09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10【漏洞复现】CVE-2015-3337 Arbitrary File Reading