React/Umi中实现移动端滑动图片验证功能

import React, { useState } from 'react';
import { Button, Slider, Image } from 'antd-mobile';
 
const MobileVerification = () => {
  const [slideVal, setSlideVal] = useState(0); // 滑动滑块的值
  const [isSliding, setIsSliding] = useState(false); // 是否正在滑动
 
  // 滑动滑块的处理函数
  const onSlideChange = (val) => {
    setSlideVal(val);
    if (val === 100) {
      // 滑动成功后的处理逻辑
      console.log('滑动验证成功');
    }
  };
 
  // 滑动开始的回调函数
  const onSlideStart = () => {
    setIsSliding(true);
  };
 
  // 滑动结束的回调函数
  const onSlideEnd = () => {
    setIsSliding(false);
  };
 
  return (
    <div>
      <div style={{ position: 'relative', width: 300, height: 40, border: '1px solid #ccc' }}>
        <div style={{ position: 'absolute', width: `${slideVal}%`, height: '100%', backgroundColor: '#1aad19', transition: 'all .3s' }} />
        <Slider
          style={{ width: '100%', height: '100%' }}
          buttonSize={40}
          min={0}
          max={100}
          value={slideVal}
          onChange={onSlideChange}
          onAfterChange={onSlideEnd}
          onTouchStart={onSlideStart}
        />
      </div>
      {isSliding ? <Image src="verification_bg.png" /> : <div>滑动验证</div>}
    </div>
  );
};
 
export default MobileVerification;

这段代码使用了Ant Design Mobile组件库中的Slider组件来实现滑动滑块功能，并通过useState钩子管理滑动的状态。滑动滑块时，会更新滑动的值，并在滑动结束后根据滑动的位置判断是否验证成功。