react滑动实现登录

实现滑动登录的 React 组件

滑动登录是一种常见的交互方式，通常用于验证用户操作或增强安全性。以下是实现滑动登录的几种方法：

使用自定义滑块组件

创建一个可拖动的滑块组件，通过监听鼠标或触摸事件实现滑动效果。

import React, { useState, useRef } from 'react';

const SliderLogin = () => {
  const [position, setPosition] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const sliderRef = useRef(null);
  const containerRef = useRef(null);
  const maxPosition = containerRef.current ? containerRef.current.offsetWidth - 40 : 0;

  const handleMouseDown = () => {
    setIsDragging(true);
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;

    const containerRect = containerRef.current.getBoundingClientRect();
    let newPosition = e.clientX - containerRect.left - 20;

    if (newPosition < 0) newPosition = 0;
    if (newPosition > maxPosition) newPosition = maxPosition;

    setPosition(newPosition);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
    if (position >= maxPosition - 10) {
      // 滑动到最右侧，执行登录逻辑
      console.log('登录成功');
    } else {
      // 未滑动到最右侧，重置位置
      setPosition(0);
    }
  };

  return (
    <div 
      ref={containerRef}
      style={{
        width: '300px',
        height: '50px',
        backgroundColor: '#f0f0f0',
        borderRadius: '25px',
        position: 'relative',
        margin: '20px auto'
      }}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      <div
        ref={sliderRef}
        style={{
          width: '40px',
          height: '40px',
          backgroundColor: '#4CAF50',
          borderRadius: '50%',
          position: 'absolute',
          left: `${position}px`,
          top: '5px',
          cursor: 'pointer',
          userSelect: 'none'
        }}
        onMouseDown={handleMouseDown}
      >
        <span style={{ position: 'absolute', top: '10px', left: '10px' }}>→</span>
      </div>
      <div style={{
        position: 'absolute',
        width: '100%',
        textAlign: 'center',
        lineHeight: '50px',
        pointerEvents: 'none'
      }}>
        滑动登录
      </div>
    </div>
  );
};

export default SliderLogin;

使用第三方库

可以使用现成的滑动验证库如 react-slider-verify 简化实现：

import React from 'react';
import SliderVerify from 'react-slider-verify';

const App = () => {
  const handleSuccess = () => {
    console.log('验证成功，执行登录');
  };

  return (
    <div style={{ width: '300px', margin: '50px auto' }}>
      <SliderVerify 
        onSuccess={handleSuccess}
        text="滑动登录"
        successText="验证成功"
      />
    </div>
  );
};

export default App;

添加动画效果

为滑动登录添加成功后的动画反馈：

const [isSuccess, setIsSuccess] = useState(false);

const handleSuccess = () => {
  setIsSuccess(true);
  setTimeout(() => {
    // 执行登录跳转或其他操作
  }, 1000);
};

return (
  <div style={{
    width: '300px',
    height: '50px',
    backgroundColor: isSuccess ? '#4CAF50' : '#f0f0f0',
    borderRadius: '25px',
    position: 'relative',
    margin: '20px auto',
    transition: 'background-color 0.3s ease'
  }}>
    {isSuccess ? (
      <div style={{
        position: 'absolute',
        width: '100%',
        textAlign: 'center',
        lineHeight: '50px',
        color: 'white'
      }}>
        登录成功 ✓
      </div>
    ) : (
      // 滑块组件代码
    )}
  </div>
);

移动端适配

添加触摸事件支持以确保在移动设备上正常工作：

const handleTouchStart = () => {
  setIsDragging(true);
};

const handleTouchMove = (e) => {
  if (!isDragging) return;

  const touch = e.touches[0];
  const containerRect = containerRef.current.getBoundingClientRect();
  let newPosition = touch.clientX - containerRect.left - 20;

  // 限制位置范围
  newPosition = Math.max(0, Math.min(newPosition, maxPosition));
  setPosition(newPosition);
};

const handleTouchEnd = () => {
  handleMouseUp();
};

// 在滑块元素上添加触摸事件
<div
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
/>

这些方法可以根据具体需求进行调整和组合，实现不同风格的滑动登录效果。