react实现一个滑动选择器效果-html代码-BFW代码库

react实现一个滑动选择器效果

代码语言：html

所属分类：选择器

代码描述：react实现一个滑动选择器效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body translate="no">
<div id="root"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script>
<script id="rendered-js">
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(0)) break;var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}window.CP.exitedLoop(0);return target;};return _extends.apply(this, arguments);}const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

function App() {
  const [{ x, velocity }, set] = useSpring(() => ({
    x: -30,
    velocity: 0 }));

  const bind = useDrag(
  ({ movement: [x], velocity, down, direction: [dx] }) => {
    if (!down) {
      set({ x, velocity: 0 });
    } else {
      set({ x, velocity: velocity * dx });
    }
  },
  {
    initial: () => [x.get(), 0],
    bounds: { left: -30, right: 150, top: 0, bottom: 0 },
    rubberband: false });



  const appStyle = {
    alignItems: "center",
    backgroundColor: "#fff",
    display: "flex",
    height: "100vh",
    justifyContent: "center",
    margin: 0 };


  const containerStyle = {
    width: 200,
    position: "relative" };


  const barStyle = {
    backgroundColor: "#333",
    height: 3,
    position: "relative",
    top: 21,
    wi.........完整代码请登录后点击上方下载按钮下载查看