手把手教你实现web页面内容滑动效果

web前端开发

共 2167字,需浏览 5分钟

 ·

2020-07-28 16:09

作者 | 唐宋元明清2188
来源 | http://www.cnblogs.com/kybs0/

标签的触摸/鼠标滑动事件,添加元素的切换动画,效果如下:

事件监听

鼠标事件和触摸事件监听:
componentDidMount() { var teachingReportDiv = document.getElementById("teachingReport") as HTMLElement; teachingReportDiv.onmousedown = this.onMouseDown; teachingReportDiv.onmouseup = this.onMouseUp; teachingReportDiv.addEventListener('touchstart', this.onTouchStart, false); teachingReportDiv.addEventListener('touchmove', this.onTouchMove, false); teachingReportDiv.addEventListener('touchend', this.onTouchEnd, false); }
触摸事件,不能HTMLElement.ontouchstart添加事件监听,可以EventListener或者在标签中添加。
"teachingReport" onTouchStart={(event) => this.onTouchStart(event)}/>
触摸事件有以下几个:
  • touchstart事件:手指触摸时候触发(支持多指触发)
  • touchmove事件:手指在滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动,当然也不能滥用否则会影响原有页面的上下滚动等。
  • touchend事件:手指从屏幕上离开的时候触发
  • touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明。。。不建议使用

事件处理

添加全局字段:
locationStartX: number = 0; locationEndX: number = 0;
滑动处理,超出滑动阈值后,更新相关状态。
onTouchStart = (event) => { this.locationStartX = event.targetTouches[0].pageX; } onTouchMove = (event) => { // event.preventDefault(); this.locationEndX = event.targetTouches[0].pageX; } onTouchEnd = (event) => { const locationChangedX = this.locationEndX < this.locationStartX; if (Math.abs(locationChangedX) > 10) { const isSlidingToRight=locationChangedX<0; }   }

添加切换动画

动画,可以通过state参数触发
this.onTouchStart(event)}/>动画数据参考://动画
@keyframes showFromLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0px); } } @keyframes showFromRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0px); } } @keyframes hideToLeft { from { opacity: 1; transform: translateX(0px); } to { opacity: 0; transform: translateX(-100px); } } @keyframes hideToRight { from { opacity: 1; transform: translateX(0px); } to { opacity: 0; transform: translateX(100px); } }
 本文完~

浏览 5
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报