低性能3张图片轮播React组件
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'; } }