> 文档中心 > cubic-bezier处理下拉和回弹

cubic-bezier处理下拉和回弹

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

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 = 80 && 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)';}}}

 

中国象棋