1. 首頁 > 生活百科 > >

React實現一個簡易版Swiper( 二 )

生活百科

在這里，我們給了他默認的寬度為auto，來實現整體寬度自適應 。而使用transition讓后續的圖片輪換可以有動畫效果 。
最后，我們只需要將圖片循環渲染在列表中即可 。
import styled from "styled-components";import React, { FC } from "react";const Swiper = styled.div`  overflow: hidden;  position: relative;`;const SwiperContainer = styled.div`  position: relative;  width: auto;  display: flex;  align-item: center;  justify-content: flex-start;  transition: all 0.3s ease;  -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;`;const SwiperSlide = styled.div`  display: flex;  align-item: center;  justify-content: center;  flex-shrink: 0;`;const Swiper: FC<  {    direction?: 'horizontal' | 'vertical';    speed?: number;    width: string;    height: string;    urls: string[];  }> = ({  direction = "horizontal",  speed = 3,  width = "",  height = "",  urls = []}) => {  return (<Swiper style={{ width, height }}>    <SwiperContainer      id="swiper-container"      style={{        height,        // 根據輪播方向參數 ， 調整flex布局方向        flexDirection: direction === "horizontal" ? "row" : "column",      }}    >     {urls.map((f: string, index: number) => (        <SwiperSlide style={{ ...styles }}>          <img src=https://www.huyubaike.com/biancheng/{f} style={{ ...styles }} /> ))} );}export default Swiper;至此為止 ， 我們整體的dom結構與樣式就編寫完成了，后面要做的就是如何讓他們按照我們想要的那樣，動起來 。
4、動畫實現既然說到了輪播動畫的實現，那么我們最先想到的也是最方便的方式，肯定是我們最熟悉的setInterval，那么整體的實現思路是什么樣的呢？
先思考一下我們想要實現的功能：1、按照預設的參數實現定時的圖片切換功能；2、如果沒有預設delay的話，則不自動輪播；3、每次輪播的距離，是由用戶配置的圖片寬高決定；4、輪播至最后一張后，停止輪播 。
首先，為了保證元素可以正常的移動 ， 我們在元素身上添加ref和id便于獲取正確的dom元素 。
import React, { FC, useRef } from "react";const swiperContainerRef = useRef<HTMLDivElement>(null);...<SwiperContainer  id="swiper-container"  ref={swiperContainerRef}  style={{    height,    // 根據輪播方向參數，調整flex布局方向    flexDirection: direction === "horizontal" ? "row" : "column",  }}>...</SwiperContainer>...其次，我們需要定義activeIndex這個state，用來標記當前展示的節點；以及用isDone標記是否所有圖片都已輪播完成(所以反饋參數) 。
import React, { FC, useState } from "react";const [activeIndex, setActiveIndex] = useState<number>(0);const [isDone, setDone] = useState<boolean>(false);然后 ， 我們還需要進行timer接收參數的定義，這里我們可以選擇使用useRef來進行定義 。
import React, { FC, useRef } from "react";const timer = useRef<any>(null);在上面的一切都準備就緒后，我們可以進行封裝啟動方法的封裝
  // 使用定時器，定時進行activeIndex的替換  const startPlaySwiper = () => {    if (speed <= 0) return;    timer.current = setInterval(() => {      setActiveIndex((preValue) => preValue + 1);    }, speed * 1000);  };

推薦閱讀