1
Ashore 299 天前
用 js 不行?建议你们换一个前端
|
3
Lilithegg 299 天前
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
应该和这个有关系 overscroll behavior safari 和 chrome 行为不一致造成的 |
4
Vickies OP js 代码如下:
function vueTouch(el, binding, type, vnode){ this.obj = el; this.binding = binding; this.touchType = type; this.vueTouches = { x: 0, y: 0 }; this.isMoving = false; this.isUseTapTouch = false; this.isUseLongTouch = false; this.vueCallBack = binding.value; this.obj.addEventListener("touchstart", (e) => { this.start(e); }, false); this.obj.addEventListener("touchend", (e) => { this.end(e); }, false); this.obj.addEventListener("touchmove", (e) => { this.move(e); }, false); } vueTouch.prototype = { start: function(e) { this.isMoving = false; this.isUseTapTouch = false; this.isUseLongTouch = false; this.vueTouches = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY }; }, end: function(e){ const disX = e.changedTouches[0].pageX - this.vueTouches.x; const disY = e.changedTouches[0].pageY - this.vueTouches.y; if(Math.abs(disX) > 10 || Math.abs(disY) > 100){ this.touchType === "swipe" && this.vueCallBack(e); if(Math.abs(disX) > Math.abs(disY)) { if(disX > 10) { this.touchType === "swiperight" && this.vueCallBack(e); } if(disX < -10) { this.touchType === "swipeleft" && this.vueCallBack(e); } } else { if(disY > 10) { this.touchType === "swipedown" && this.vueCallBack(e); } if(disY < -10) { this.touchType === "swipeup" && this.vueCallBack(e); } } } }, move: function(){ this.isMoving = true; }, }; export const swipedown = { mounted(el, binding, vnode) { new vueTouch(el, binding, "swipedown", vnode); }, unmounted(el,binding,vnode) { } } export const swipeup = { mounted(el, binding, vnode) { new vueTouch(el, binding, "swipeup", vnode); }, unmounted(el,binding,vnode) { } } |