当前位置: 首页 > 面试题库 >

在React JS中滑动效果

蒋硕
2023-03-14
问题内容

我正在尝试使用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。


问题答案:

您可以将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事件处理程序中的state属性,但是如果您希望滑动功能感觉自然,则需要通过left使用来更新指针来跟踪指针的位置(无论是鼠标还是触摸)事件的clientX属性。

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

这是我制作的快速n肮脏的Codepen,用于从列表中删除项目:

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



 类似资料:
  • 自定义选项卡选择效果,包括:点击tab产生高光效果,tab下面的横条滑动到选择的tab,对应的视图也进行滑动显示。 [Code4App.com]

  • 模仿大众点评网的团购页面,整体布局滑动到顶端时,信息描述的view停止在顶端,其他布局仍可滑动。在demo中的表现是:白色视图往上滑动接近屏幕顶端时,将停止(表现为表层出现一个暗红色的视图)滑动,底部的视图继续往上移动。底部视图往下移动时,当滑动到一定位置时(表现为底部的白色视图和暗红色视图重合),白色视图将继续移动。 [Code4App.com]

  • 这段代码实现类似水果忍者应用中,用户手指在屏幕上划动时出现划痕轨迹的效果,有兴趣的朋友可以研究一下。 [Code4App.com]

  • 本文向大家介绍JavaScript实现滑动门效果,包括了JavaScript实现滑动门效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二、实现滑

  • 本文向大家介绍javascript图片滑动效果实现,包括了javascript图片滑动效果实现的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: css: js操作: 更多关于滑动效果的专题,请点击下方链接查看: javascript滑