cubic-bezier处理下拉和回弹

*  下拉和回弹
*  1.关闭bounce避免ios端下拉冲突
*  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
*    transition设置0.1秒延迟，让css来过渡这段空窗期
*  3.回弹效果可修改曲线值来调整效果，推荐好用的bezier生成工具 及模板 

<script>
	let startY = 0,
	    moveY = 0,
	    pageAtTop = true;
	export default {
		data() {
			return {
			   coverTransform: 'translateY(0px)',
			   coverTransition: '0s',
			   moving: false,
			}
		}
		methods: {
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}

		}
	}
</script>

 

本文地址：https://blog.csdn.net/weixin_45788691/article/details/107173176