cubic-bezier处理下拉和回弹

我就不思

已于 2022-05-09 10:50:09 修改

阅读量1.2k

点赞数 1

分类专栏： CSS 文章标签： javascript 开发语言 ecmascript

于 2020-07-19 16:55:03 首次发布

本文链接：https://blog.csdn.net/weixin_45788691/article/details/107173176

版权

CSS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

* 下拉和回弹
* 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>