学用Hooks写React组件——基础版移动端无缝轮播图组件

/* 可视区容器 */
<div>
    /* 包裹容器 */
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    /* 按钮容器 */
    <div>
        <button>Left</button>
        <button>Right</button>
    </div>
</div>

import React, { useState, useEffect, useRef } from 'react';
import styles from './index.css';

const Carousel = ({children, selectedIndex = 1}) => {
    // 当切换的时候，改变的就是当前位置状态
    // 所以定义当前位置,可以通过传入的selectedIndex来控制最开始显示第几个轮播图,默认从1开始
    const [active, setActive] = useState(selectedIndex);
    // 获取包裹容器
    const container = useRef(null);
    // 获取当前可视区容器宽度
    const SCREEN_WIDTH = window.screen.width;
    
    // 统一处理，当active发生变化的时候，我们需要做的就是切换轮播图到某个位置,转场通过控制包裹容器的transform来进行切换，对transform的控制封装成setTransition函数
    useEffect(() => {
        setTransition();
    }, [active]);
    
    const setTransition = () => {
        // 计算需要移动的距离并进行修改，这是切换的核心
        const distance = (1 - active) * SCREEN_WIDTH;
        container.current.style.transform = `translate3d(${distance}px, 0, 0)`;
    }
    
    // 为了演示是否成功，添加两个按钮来切换
    // 上一页
    const handlePrev = () => {
        // 对临界值进行处理
        setActive(active === 1 ? children.length : active - 1)
    }
    
    // 下一页
    const handleNext = () => {
        // 对临界值进行处理
        setActive(active === children.length ? 1 : active + 1);
    }
    
    return (
        <div className={style.carousel}>
            <div 
                ref={container}
                className={styles.container}>
                {
                    React.Children.map(children, (child, index) => {
                        return (
                            <div 
                                style={{left: index * SCREEN_WIDTH}}
                                className={styles.items}>{child}</div>
                        )
                    })
                }
            </div>
            <div>
                <div onClick={handlePrev} className={styles.buttonLeft}>Left</div>
                <div onClick={handleNext} className={styles.buttonRight}>Right</div>
            </div>
        </div>
    )
}

.carousel{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.container{
    transform: translate3d(0,0,0);
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
    position: relative;
    height: 100px;
}
.items {
    width: 100%;
    flex-shrink: 0;
    position: absolute;
    top: 0;
}
.buttonLeft {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background: #fff;
}
.buttonRight {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background: #fff;
}

const Carousel = ({children, selectedIndex = 1}) => {
    // 创建一个参数，对轮播图的状态进行控制  1为静止，2为进行中。主要目的是避免快速切换导致的bug。
    // 所以只有在动画结束过后，也就是静止的时候才能再次切换轮播图
    const [status, setStatus] = useState(1);
    ...
    ...相同代码省略
    ...
    
    // 因为要达到流畅的切换，已当前为第一个轮播图为例，向左切换时，最后一个轮播图补位，然后瞬间归位(在此时取消过渡动画，完成流畅切换); 对setTransition进行修改并新增offset参数对函数进行增强，后面具体会讲到此参数的作用。
    const setTransition = (offset = 0) => {
        ...新增的代码
        function transitionend() {
            // 动画结束后就关闭动画
            container.current.style.transitionProperty = 'none';
            // 恢复状态为1静止
            setStatus(1);
            // 当前位置在补位的位置时马上切换到本该在的位置
            if (active === 0) {
                // 使用setTimeout包裹，避免transitionProperty动画未关闭就切换的闪频
                setTimeout(() => {
                    setActive(children.length);
                }, 0)
            }
            if (active === children.length + 1) {
                setTimeout(() => {
                    setActive(1);
                }, 0)
            }
            container.current.removeEventListener('transitionend', transitionend, false);
        }
        container.current.addEventListener('transitionend', transitionend, false);
        
        const distance = (1 - active) * SCREEN_WIDTH;
        ...修改的代码，新增offset
        container.current.style.transform = `translate3d(${distance+offset}px,0,0)`;
        }
    }
    
    ...新增代码，封装对active修改的操作
    const handleChangeActive = (number) => {
        // 当在动画进行时，不允许切换
        if (status === 2) return;
        // 切换前先把动画参数打开
        container.current.style.transitionProperty = 'all';
        // 修改状态为进行时
        setStatus(2);
        // 改变当前位置
        setActive(number);
    }
    
    ...修改的代码
    const handlePrev = () => {
        // 根据之前的理论，当前位置如果是第一个的情况下，最后一个轮播图会跳到第一个的前面
        // 切换到前面的时候active就要减去到0才能到达位置，所以对此进行修改，并使用前面封装的handleChangeActive方法进行包裹
        // 之前的代码
        // setActive(active === 1 ? children.length : active - 1)；
        // 修改过后的代码
        handleChangeActive(active === 0 ? children.length : active - 1);
    }
    
    const handleNext = () => {
        // 此处同上同理
        // 之前的代码
        // setActive(active === children.length ? 1 : active + 1);
        handleChangeActive(active === children.length + 1 ? 1 : active + 1);
    }
    
    return (
        <div className={styles.carousel}>
            <div
                ref={container}
                className={styles.container}>
                {
                    React.Children.map(children, (child, index) => {
                        ...修改的代码
                        // 当轮播图处于第一个时，最后一个组件时，提取到最前面去
                        if (active <= 1 && index + 1 === children.length) {
                            return (
                                <div style={{left: -1 * SCREEN_WIDTH}} className={styles.items}>{child}</div>
                            )
                        }
                        // 当轮播图处于最后一个时，第一个组件提取到最后面
                        if (active >= children.length && index === 0) {
                            return (
                                <div style={{left: children.length * SCREEN_WIDTH}} className={styles.item}>{child}</div>
                            )
                        }
                        return (
                            <div 
                                style={{left: index * SCREEN_WIDTH}}
                                className={styles.items}>{child}</div>
                        )
                    })
                }    
            </div>
        </div>
    )
}

...相同代码省略
import Hammer from 'hammerjs';
...
...相同代码省略
...
useEffect(() => {
    cosnt manager = new Hammer(container.current);
    manager.add(new Hammer.Pan());
    manager.on('panend panmove', function(e) {
        // 状态在进行中时，不允许切换
        if (status === 2) return;
        // e.eventType 判断当前状态  
        // INPUT_MOVE 移动中  
        // INPUT_END 结束
        if (e.eventType === Hammer.INPUT_MOVE) {
            // 之前的offset参数的在此起到了作用，在手动滑动的时候并不是直接滑动到下一页，只是跟随手指进行偏移量改变
            setTransition(e.deltaX);
        } else if (e.eventType === Hammer.INPUT_END) {
            // e.direction 判断移动方向
            // Hammer.DIRECTION_LEFT 向左
            // Hammer.DIRECTION_RIGHT 向右
            // 当滑动距离大于1/3时，直接滑动到下一页，否则恢复偏移量
            if (e.direction === Hammer.DIRECTION_LEFT && Math.abs(e.deltaX) > SCREEN_WIDTH / 3) {
                handleNext();
            } else if (e.direction === Hammer.DIRECTION_RIGHT && Math.abs(e.deltaX) > SCREEN_WIDTH / 3) {
                handlePrev();
            } else {
                setTransition(0);
            }
        }
        return () => {
            manager.off('panmove');
            manager.off('panend');
        }
    })
    
}, [status, active])