V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Vickies
V2EX  ›  问与答

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

  •  
  •   Vickies · 297 天前 · 858 次点击
    这是一个创建于 297 天前的主题,其中的信息可能已经有所发展或是发生改变。
    请教一个问题:
    前端用的是 vue 框架,在做微信 H5 的项目时,页面上滑返回上一页的交互做不了,前端说处理不了。。。问题是 IOS 都可以,安卓就不可以。有大神遇到过嘛?
    4 条回复    2024-01-30 13:51:14 +08:00
    Ashore
        1
    Ashore  
       297 天前
    用 js 不行?建议你们换一个前端
    Vickies
        2
    Vickies  
    OP
       297 天前
    @Ashore 准备换了。。。。
    Lilithegg
        3
    Lilithegg  
       297 天前
    https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

    应该和这个有关系 overscroll behavior

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

    }
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2794 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 14:26 · PVG 22:26 · LAX 06:26 · JFK 09:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.