index.tsx文件
import React, { Component, createRef } from 'react';
import './index.less'
class index extends Component {
box = createRef<HTMLDivElement>()
getbox = () => this.box.current as HTMLDivElement;
disx: number = 0
x: number = 0
index: number = 0
list = [4, 1, 2, 3, 4, 1]
fnStart(ev: React.TouchEvent) {
this.getbox().style.transition = 'null';
if (this.index === 5) this.index = 1;
if (this.index === 0) this.index = 4;
this.disx = ev.changedTouches[0].pageX;
this.getbox().ontouchmove = this.fnMove.bind(this)
this.getbox().ontouchend = this.fnEnd.bind(this)
}
fnMove(ev: TouchEvent) {
this.x = ev.changedTouches[0].pageX - this.disx;
this.getbox().style.left = this.index * -100 + this.x / 10 + 'vw'
}
fnEnd() {
this.getbox().style.transition = '.3s all';
if (this.x < -150) this.index++
if (this.x > 150) this.index--
this.x = 0
this.getbox().style.left = this.index * -100 + 'vw'
}
render() {
return (
<div className='slider'>
<div className="slider-box">
<div className="list-item" ref={this.box}>
{
this.list.map((item, index) => <div key={index}
onTouchStart={this.fnStart.bind(this)}
>{item}</div>)
}
</div>
</div>
</div>
);
}
}
export default index;
index.less
.slider {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
.slider-box {
display: flex;
position: absolute;
overflow: hidden;
height: 81%;
width: 100vw;
.list-item {
transition: 0.3s all;
display: flex;
position: absolute;
left: 0vw;
height: 81%;
>div:nth-child(2n-1) {
background-color: rgb(216, 56, 56);
}
>div:nth-child(2n) {
background-color: rgb(31, 140, 186);
}
div {
text-align: center;
font-size: 50px;
line-height: 80px;
width: 100vw;
height: 40%;
}
}
}
}