微信 H5 项目 IOS 可以上拉滑动返回上一页，安卓不行，求解决。。。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 299 天前的主题，其中的信息可能已经有所发展或是发生改变。

请教一个问题：
前端用的是 vue 框架，在做微信 H5 的项目时，页面上滑返回上一页的交互做不了，前端说处理不了。。。问题是 IOS 都可以，安卓就不可以。有大神遇到过嘛？

iOS

安卓

Vue

4 条回复 • 2024-01-30 13:51:14 +08:00

Ashore

299 天前

用 js 不行？建议你们换一个前端

Vickies

299 天前

@Ashore 准备换了。。。。

Lilithegg

299 天前

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

应该和这个有关系 overscroll behavior

safari 和 chrome 行为不一致造成的

Vickies

299 天前

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) {

}
}