* 下拉和回弹
* 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
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
网友评论