低性能3张图片轮播React组件

Posted 2020-10-18 诗酒明月

import React from ‘react‘;

import {getSwipeWay} from ‘../utils/swipe‘;

class Carousel extends React.Component {
    
    constructor(args){
        super(args);
        this.state = {
        };
        //判断滑动手势
        this.swipeWay = getSwipeWay(50);//闸值50
        //图片显示的限制
        this.limit = 3;
        //当前展示的图片
        this.currIndex = 0;
        //展示的数组
        this.showImgs = [];
        //手势滑动坐标
        this.position = {
            x1:0,
            x2:0,
            y1:0,
            y2:0,
        };
        //<ul>
        this.Ul = null;
    }

    getHead(arr){
        if(Array.isArray(arr)){
            return arr[0];
        }
        console.error(‘非数组‘);
    }

    getLast(arr){
        if(Array.isArray(arr)){
            const len = arr.length;
            return arr[len-1];            
        }
        console.error(‘非数组‘);
    }

    calcIndex(){
        const {imgs}     = this.props;
        const len          = imgs.length;
        const limit     = this.limit;
        const currIndex = this.currIndex;

        if(currIndex == 0){
            this.showImgs = imgs.slice(0,limit - 1);
            this.showImgs.unshift(this.getLast(imgs));
            return;
        }

        if(currIndex == len - 1){
            this.showImgs = imgs.slice(len -2 ,len);
            this.showImgs.push(this.getHead(imgs));
            return;
        }

        this.showImgs = imgs.slice(currIndex -1 , currIndex + limit -1);

    }

    changeCurrIndex(flag){
        const {imgs} = this.props;
        const last    = imgs.length -1;
        const currIndex = this.currIndex;
        if(flag === ‘-‘){
            this.currIndex = currIndex == 0 ? last : currIndex -1 ;
            return;
        }

        if(flag === ‘+‘){
            this.currIndex = currIndex == last ? 0 : currIndex + 1 ;
            return;
        }
    }

    ulTranslate(value){
        const Ul = this.Ul;
        if(Ul && Ul.style.webkitTranslate ){
            Ul.style.webkitTranslate = value;
        }else{
            Ul.style.translate = value;
        }
    }

    createUl(){
        //要保证<ul>key不同 也就是每次轮播后都要是新的标签，有损性能
        const now = Date.now();
        return (<ul onTouchEnd={this.touchEnd} 
                onTouchMove={this.touchMove} 
                onTouchStart={this.touchStart} 
                onTransitionEnd={this.transitionEnd} ref={(ele)=>this.Ul=ele} key={now}>

                {this.createLis()}
            </ul>);
    }

    createLis(){
        this.calcIndex();        
        const imgs = this.showImgs;

        return imgs.map((src,i)=>{
            const liStyle = {
                // translate:(-i)+‘00%‘,
                translate:( (i+‘00‘) - 100 ) + ‘%‘,
                WebkitTranslate:( (i+‘00‘) - 100 ) + ‘%‘,
            };

            return <li className=‘item‘ key={i} style={liStyle} ><img src={src}  /></li>
        });

    }

    touchStart = (e) => {
        const {clientX,clientY} = e.touches[0];
        this.position.x1 = clientX;
        this.position.y1 = clientY;
    }

    touchMove = (e) => {

    }

    touchEnd = (e) => {
        const {clientX,clientY} = e.changedTouches[0];
        this.position.x2 = clientX;
        this.position.y2 = clientY;

        const {x1,x2,y1,y2} = this.position;

        const direction = this.swipeWay(x1,x2,y1,y2);

        if( direction === ‘Left‘){
            this.changeCurrIndex(‘+‘);
            this.ulTranslate(‘-100%‘);
        }

        if(direction === ‘Right‘){
            this.changeCurrIndex(‘-‘);
            this.ulTranslate(‘100%‘);
        }
    }

    transitionEnd = (e) => {
        this.forceUpdate();
    }

    render(){

        return (<div className=‘mm-carousel‘ >
            {this.createUl()}
        </div>);
    }
}

export default Carousel;

.mm-carousel{
    overflow:hidden;
    >ul{
        height: 150px;
        width: 100%;
        position : relative;
        transition: all 0.2s;
        >.item{
            position:absolute;
            width: 100%;
            >img{
                width: 100%;
                height: 150px;
            }
        }        
    }

}

export const getSwipeWay =(U) => (x1,x2,y1,y2) => {
    const X = x2 - x1 ;
    const Y = y2 - y1 ;
    const {abs} = Math;
    
    if(abs(X) < abs(U) && abs(Y) < abs(U)){
        return false;
    }

    if(abs(Y) > abs(X) && Y < 0){
        return ‘Up‘;
    }

    if(abs(Y) > abs(X) && Y > 0){
        return ‘Down‘;
    }

    if(abs(Y) < abs(X) && X > 0){
        return ‘Right‘;
    }

    if(abs(Y) < abs(X) && X < 0){
        return ‘Left‘;
    }

}