react js中的滑动效果

IT技术 javascript reactjs
2021-03-23 23:38:51

我正在尝试使用 React 创建一个滑动事件。我不想使用任何外部组件或 jquery。

css是这样的： 

.outter{
  position:relative;
  width: 100%;
  height: 150px;
  background-color: blue;
}

.inner{
  position: absolute;
  width: 1000%; 
  left: 50px;
}
.child{
  float: left;
  margin-right: 15px;
}

在react组件中，我正在尝试执行以下操作： 

class Test extends React.Component {
    constructor(props){
    super(props);

    this.state = {
        left: 0
    }
  }

  handleSwipe(){
    this.setState({left: -350})
  }

  render(){
    return(
        <div className="outter">
            <div className="inner" style={{left: this.state.left}} onSwipe={this.handleSwipe.bind(this)}>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
            </div>
      </div>
    )
  }
}

React.render(<Test />, document.getElementById('container'));

如何识别滑动事件？

如果我在我的示例中而不是onSwipe添加onClick它可以工作，但是如何制作滑动效果？

这是jsfiddle。

3个回答

您可以onTouch向 React 组件添加事件处理程序：

onTouchStart={touchStartEvent => this.handleTouchStart(touchStartEvent)}
onTouchMove={touchMoveEvent => this.handleTouchMove(touchMoveEvent)}
onTouchEnd={() => this.handleTouchEnd()}

您可能还想为鼠标事件添加事件处理程序以实现跨平台兼容性：

onMouseDown={mouseDownEvent => this.handleMouseDown(mouseDownEvent)}
onMouseMove={mouseMoveEvent => this.handleMouseMove(mouseMoveEvent)}
onMouseUp={() => this.handleMouseUp()}
onMouseLeave={() => this.handleMouseLeave()}

您有left在事件处理程序中更新状态属性的正确想法，但是如果您希望滑动功能感觉自然，您需要通过left使用更新来跟踪指针（无论是鼠标还是触摸）的位置事件的clientX财产。

为此，您需要存储第一次触摸的位置并将其设置为left等于触摸位置的变化。为了增加真实感，您还可以跟踪触摸的速度并在触摸完成后继续为组件设置动画。

这是我为滑动以从列表中删除项目而制作的快速-n-dirty Codepen：

https://codepen.io/swingthing/pen/ZBGBJb/

很好的答案和代码笔。奇怪的是，在复制你时，我​​最终得到了更加滞后的体验。
2021-05-29 23:38:51
@jake Hoffman 首先，感谢您提供这么棒的代码艺术作品。我想知道你是否有 handleMotionStart 函数的代码，我在上面的 codepen 中找不到它的代码。提前致谢
2021-05-30 23:38:51
请注意：onTouchStart={touchStartEvent => this.handleTouchStart(touchStartEvent)}在功能上等效于onTouchStart={this.handleTouchStart}但效率稍低，因为它会导致每次渲染都定义一个新的匿名函数。
2021-06-11 23:38:51
所以基本上React不存在onSwipe事件，只针对React-Native，我们用onTouch来代替onSwipe。
2021-06-11 23:38:51
我希望每个人的快速而肮脏的代码都像你的先生一样阅读。👏👏👏
2021-06-21 23:38:51

我使用上面好的解决方案作为构建我需要的基础。也许有人需要这样的东西。想法是在滑动效果上左右移动我的自定义滑块。如果您希望它更灵敏，请将 150 调整为 75。

const [touchStart, setTouchStart] = React.useState(0);
const [touchEnd, setTouchEnd] = React.useState(0);

function handleTouchStart(e) {
    setTouchStart(e.targetTouches[0].clientX);
}

function handleTouchMove(e) {
    setTouchEnd(e.targetTouches[0].clientX);
}

function handleTouchEnd() {
    if (touchStart - touchEnd > 150) {
        // do your stuff here for left swipe
        moveSliderRight();
    }

    if (touchStart - touchEnd < -150) {
        // do your stuff here for right swipe
        moveSliderLeft();
    }
}

刚刚找到一个可能有用的 DOM 事件。将 .ontouchend 添加到您的 HTML 标记以检测源自该标记的任何滑动事件。

https://www.w3schools.com/jsref/event_touchend.asp - 参考

其它你可能感兴趣的问题
上一篇Next.js“构建时间”究竟何时发生？ 下一篇使用 mobx 创建多个商店并将其注入组件的正确方法 - ReactJs