create-chuntianxiaozhu/template-react-h5-slider/src/page.jsx

春天小猪模板工具

import styles from './page.module.less';
import { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { ShowIndex, Music, SliderMore } from '@chuntianxiaozhu/reactcomponents';

/**
 * @param {*} props 
 * @returns 
 */
const Page = (props) => {
  const { data = {} } = props;
  const { title } = data;
  const [index, setIndex] = useState(0);
  useEffect(() => {
    if (title) {
      document.title = title;
    }
  }, [title]);

  return <div className={`${styles.page} ${styles.pageIgnore}`}>
    <Swiper direction="vertical" freeMode height={window.innerHeight} onSlideChangeTransitionEnd={(swiper) => setIndex(swiper.activeIndex)}>
      <Music />
      {index < 3 ? <SliderMore /> : null}
      <SwiperSlide>
        <ShowIndex sort={0} curIndex={index}>
          滑动一
        </ShowIndex>
      </SwiperSlide>
      <SwiperSlide>
        <ShowIndex sort={1} curIndex={index}>
          滑动二
        </ShowIndex>
      </SwiperSlide>
      <SwiperSlide>
        <ShowIndex sort={2} curIndex={index}>
          滑动三
        </ShowIndex>
      </SwiperSlide>
      <SwiperSlide>
        <ShowIndex sort={3} curIndex={index}>
          滑动四
        </ShowIndex>
      </SwiperSlide>
      <SwiperSlide>
        <ShowIndex sort={4} curIndex={index}>
          滑动五
        </ShowIndex>
      </SwiperSlide>
    </Swiper>
  </div>
}

export default Page;