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