React 轮播图-摩杜云开发者社区

React 轮播图_css

Index.js:

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:

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:

.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;}

效果图：

React 轮播图_ide_02

https://swiperjs.com/demos

React 轮播图_前端_03