imengyu
imengyu
  • 发布:2022-03-30 10:11
  • 更新:2022-04-02 14:43
  • 阅读:876

WebView drag 做侧滑返回 和页面内部滑动冲突要怎么解决呢?

分类:nvue

App 需要加一个类似于今日头条的侧滑返回功能,iOS本身有侧滑返回,主要是Android端。参考了一些文章,发现webview有提供滑动的API,可以做出侧滑返回的代码。这个是我侧滑返回的代码:

mounted() {   
    //获取上一页的webview  
    const pages = getCurrentPages();  //获取所有页面栈实例列表  
    const nowPage = pages[ pages.length - 1];  //当前页页面实例  
    const prevPage = pages[ pages.length - 2 ];  //上一页页面实例  

    if(typeof nowPage === 'undefined' || typeof prevPage === 'undefined')   
        return;  

    const currentWebview = nowPage.$getAppWebview(); //当前页页面Webview  
    const prevWebview = prevPage.$getAppWebview(); //上一页页面Webview  

    if(currentWebview && prevWebview) {  
        //监听当前侧滑窗口的右滑  
        currentWebview.drag({  
            direction: 'right',  
            moveMode: 'followFinger'  
        }, {  
            view: prevWebview,  
            moveMode: 'silent'  
        }, function(e) {  
            // 显示遮罩层  
            prevWebview.setStyle({ mask:'rgba(0,0,0,0.5)' });  
            if (e.type == 'end') {  
                //关闭遮罩层  
                prevWebview.setStyle({ mask:'none' });  
                //关闭当前页面  
                if(e.result)  
                    uni.navigateBack({ delta: 1 });  
            }  
        });  
    }  
}

但是出现问题,假如页面内也有横向滚动的组件,会冲突导致这些组件无法滚动。

这就很头疼,页面里面有一个swiper,只能右滑不能左滑了,这个页面只好先不加侧滑返回。有没有办法可以让这两者不冲突的吗?

或者是否可以设置一个区域,只有在这个区域drag函数才有效,例如只有在屏幕左侧区域按下才可以拖动webview?

经过测试,NVUE页面里面会冲突,vue页面则不会。

测试项目在下方。

2022-03-30 10:11 负责人:无 分享
已邀请:
imengyu

imengyu (作者)

看过这个问题2018年就有人提过了,4年了都没有解决。2077年再回来看,我估计官方还是不解决这个问题,呵呵

  • 愚者

    各位领导内存溢出解决了没

    2024-03-13 15:51

imengyu

imengyu (作者)

还是没人理。估计官方也不想改这个核心的问题。

原生Android有非常多现成开源组件可以用,随便配置下很简单就实现这个功能了,没想到Uniapp这么麻烦,这么多限制。

要考虑放弃Uniapp了,直接用原生开发。

BoredApe

BoredApe - 有问题就会有答案。

请上传一个能重现问题的测试工程

  • imengyu (作者)

    非常感谢您,测试项目上传了。我试过NVUE页面里面会冲突,vue页面则不会冲突。

    2022-03-31 09:54

  • 3***@qq.com

    回复 imengyu: 请问这个问题解决了吗

    2022-04-21 16:26

该问题目前已经被锁定, 无法添加新回复