微信 H5 项目 IOS 可以下拉滑动返回上一页,安卓不行

333 天前
 Vickies
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) {

}
}
643 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1012748

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX