用于实现一个可以滑动的选项卡。主要的功能是在触摸屏幕时记录起始点,滑动时记录结束点,计算两点距离是否达到一定的阈值,若达到则判断滑动的方向并更新组件状态,实现选项卡的切换。
先给元素加上css定位:
ul{
padding: 65px 0 0;
position: relative;
left: 0;
top: 0;
transition: left .5s linear;
...
}
js实现:
1.导入React和Component模块。
import React, { Component } from 'react';
2. 定义三个变量:startX
、endX
和liIndex
。
let startX = -1;
let endX = -1;
let liIndex = 0;
startX
和endX
用于记录触摸屏幕时的起始点和结束点,liIndex
用于记录当前选项卡的索引值。
3. 定义一个名为Test
的React组件,并在组件的state
中定义一个名为ulLeft
的变量,用于设置ul
元素的左侧偏移量。
class Test extends Component {
state