前言:

WebKit中的JavaScriptCore引擎处理的JS滑动与原生控件滑动冲突尚未完善,这篇文章讨论下如何彻底解决H5端的滑动控件与原生控件滑动冲突

更多文章请关注:http://www.jianshu.com/u/b1cff340957c

效果图

1:点击WebView中的轮播图区域左右滑动与上下滑动

2:WebView非轮播区域左右翻页ViewPager

一:WebView内容的滑动

首先介绍下WebView内容的几种滑动方式

１：WebView在固定宽高时与自适应屏幕时的滑动

固定宽高时,WebView加载的html页面内容宽度或高度大于webView的宽度或高度时,滑动的都是改变mScrollX, mScrollY的值,这种滑动能在onScrollChanged(int l, int t, int oldl, int oldt)监听到getScrollX, getScrollY值变化.
WebView自适应屏幕宽度,高度自适应嵌套在ScrollView中滑动时,WebView高度即为加载页面的实际高度,此时页面中内容的滑动实际就是ScrollView在控制,滑动改变的是ScrollView中第一个子控件的scrollY值

2：H5控件通过JS控制的滑动

这种滑动在WebView的某个固定区域内通过JS控制滑动,无论是水平滑动还是垂直滑动都不会像android原生滑动控件有requestDisallowInterceptTouchEvent请求事件放行,而且又不影响WebView的scrollX,scrollY值,所以即使是(能自动处理水平与垂直滑动区别的)ViewPager也不能判断它是否能够优先滑动
第1个问题只要能改变scrollX或scrollY值外层控件就能识别是否能够优先滑动,这里不再讲述如何处理滑动优先
上层控件如何处理水平与垂直滑动和多层嵌套-此处链接

二：解决JS与原生控件滑动冲突

直接举例子说明,　H5中的轮播控件被嵌套到NestedScrollView中,外层再嵌套SwipeRefreshLayout 下拉刷新,外层再嵌套ViewPager,既然外层控件无法判断JS是否优先滑动,那思路只能由JS绝对优先滑动,在产生水平或垂直滑动或无法滑动时再告诉上层控件是否要放行事件

举例子前先讲下网上一些大神们如何处理

直接上代码喽，先是JS部分
(这里会用到js交互,与js的事件监听,作者对这块水平烂,如有写错,多多指点)

 // 轮播滚动
    var mySwiper = $('.slidepics').swiper({
        loop : true,
        pagination: '.dotted p',
        paginationClickable: true,
        spaceBetween: 30,
        autoplay:3000,
        autoplayDisableOnInteraction:false,
        onSliderMove:function(swiper) {
            //如果光用此方法来申请app原生控件不拦截事件,在快速滑动的时候可能抢不到事件
            //还要配合下面的touch事件来获取
            isBeingDrag = true;
            window.Android.requestEvent(true);
        }
    });

    // 轮播滚动事件监听
    $('.slidepics').on('touchstart touchmove touchend touchcancel' , function(event) {
        var touch = event.originalEvent.targetTouches[0];
        switch (event.type) {
            case "touchstart":
                mLastClientX = touch.clientX;
                mLastClientY = touch.clientY;
                isBeingDrag = false;
                window.Android.requestEvent(true);
                break;
            case "touchmove":
                if (!isBeingDrag) {
                    var xDiff = Math.abs(touch.clientX - mLastClientX);
                    var yDiff = Math.abs(touch.clientY - mLastClientY);
                    //console.log(xDiff + "  " + yDiff);
                    if (xDiff >= touchSlop) {
                        isBeingDrag = true;
                    } else if(yDiff > touchSlop) {
                        //产生app纵向滑动,父控件不强制请求放行事件,这段逻辑主要是不影响外层垂直滑动控件的滑动
                        //js端控制滑动与app端的标准不一样,所以结合上面的onSliderMove:function方法来判断
                        //如果H5端控件已经产生滑动时则必须请求父控件放行事件
                        //如果有些开源控件没有类似onSliderMove方法时,只需提供控件是否产生滑动就行,原理都是一样
                        isBeingDrag = true;
                        window.Android.requestEvent(false);
                    }
                }
                break;
            case "touchend":
                window.Android.requestEvent(false);
                break;
        }
    });

  //app端的滑动值
  var touchSlop = 0;
  //初次按下时的x, y轴值
  var mLastClientX, mLastClientY;
  //是否处于滑动中
  var isBeingDrag = false;
  //js附值,在web加载完成时将android的滑动单位值传给js
  function initTouchSlop(appTouchSlop) {
      touchSlop = appTouchSlop;
  }

JS端事件代码逻辑跟app端差不多,android代码

   /**
     * js交互类
     */
    private class JsCallback {

        @JavascriptInterface
        public void requestEvent(boolean request) {
            Log.i("you", "requestDisallowInterceptTouchEvent " + request+"  "+Thread.currentThread().getName());
            mWebView.requestDisallowInterceptTouchEvent(request);
        }

    }
 　　　　mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                int touchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
                StringBuilder jsSb = new StringBuilder("javascript:initTouchSlop('").append(touchSlop).append("')");
                mWebView.loadUrl(jsSb.toString());
            }
        });
     

需要注意的是:js交互回调不是在主线程中执行.如果您的界面中没有涉及即有水平又有垂直滑动的复杂嵌套,js代码也可以简单化,只需要监听touchstart, touchend事件即可

小细节：requestDisallowInterceptTouchEvent()方法在SwipeRefreshLayout中可能会不生效,此方法在SwipeRefreshLayout中被重写,在SDK22以下版本的V4包中,此方法什么都不执行,google的版本问题甚是头疼,要解决这问题就是下拉刷新嵌套的控件去实现NestedScroll,设置isNestedScrollingEnabled值为true,google也有写好的NestedScrollView

   @Override
    public void requestDisallowInterceptTouchEvent(boolean b) {
        if ((android.os.Build.VERSION.SDK_INT < 21 && mTarget instanceof AbsListView)
                || (mTarget != null && !ViewCompat.isNestedScrollingEnabled(mTarget))) {
            // Nope.
            // 可以看出SwipeRefreshLayout的第一个child没有实现NestedScroll时不能申请到上层控件不拦截事件,
            //这也是为什么SwipeRefreshLayout嵌套很多控件下拉刷新会有冲突的原因,子控件无法传递requestDisallowInterceptTouchEvent
        } else {
            super.requestDisallowInterceptTouchEvent(b);
        }
    }

在使用嵌套下拉刷新SwipeRefreshLayout时注意V4包的版本,SDK22版本以下是不支持的,H5端的冲突也就没法处理
如果您有更好的方法解决冲突,请多多指教

更多文章请关注:http://www.jianshu.com/u/b1cff340957c

最后附上源码https://github.com/youxiaochen/WebViewDemo