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';
}
}