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

327 天前
 Vickies
请教一个问题:
前端用的是 vue 框架,在做微信 H5 的项目时,页面上滑返回上一页的交互做不了,前端说处理不了。。。问题是 IOS 都可以,安卓就不可以。有大神遇到过嘛?
885 次点击
所在节点    问与答
4 条回复
Ashore
327 天前
用 js 不行?建议你们换一个前端
Vickies
327 天前
@Ashore 准备换了。。。。
Lilithegg
327 天前
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

应该和这个有关系 overscroll behavior

safari 和 chrome 行为不一致造成的
Vickies
327 天前
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) {

}
}

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

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

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

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

© 2021 V2EX