webview轮播图与Android滑动冲突的解决办法

在Android中我们经常需要左右滑动，其中内嵌的web页面也有滑动动作。轮播图举例：需要左右翻页时，会触发Android中的ViewPager导致翻页到另一个页面轮播图翻页翻不动，或失效。但是由于安卓是父，而Web是子。在Web中不论你做什么处理，都管不了父窗口的事情，所以需要Android做处理，而前端最好能给Android传递轮播图的位置，让这块区域的viewPager失效。

上代码：

前端用的Vux框架，@on-get-height会获取当前轮播图的高度。

<template>
    <div @click="navigation">
    	<group-title></group-title>
    	<swiper id="swiper" @on-get-height="getByheight"  
    		:show-dots="true" style="width:100%;margin:0 auto;" 
    		:aspect-ratio="400/800" loop auto :list="demo07_list"  :index="demo07_index" 
    		@on-index-change="demo07_onIndexChange" ></swiper>
    	<!--<p>current index: {{demo07_index}}</p>-->
    </div>
</template>

//挂载进Window全局中，给Adroid调用，
window.downState=function(msg){
	android.getPagerDesc(msg)
}
export default {
    name:'pet_home',
      data(){
  	    return{
                demo07_list:[{img: '../../../static/lunbotu1.png',title: ''}, //轮播图
							{img: '../../../static/img1.png',title: ''},
							{img: '../../../static/lunbotu1.png',title: ''}],
  		        demo07_index: 0,//轮播图Index角标
  		        swiperItemIndex: 1,
                Slide:'',
        }
    },
    methods: {
        demo07_onIndexChange (index) {
            this.demo07_index = index
        },
        getByheight(res){//获取轮播图宽高
            //  var swiperWidth = document.getElementById("swiper").clientWidth+"px"
            var swiperHeight = res
            this.Slide=swiperHeight
        },
    },
    watch:{
	   //因为高度生命周期的问题，我们必须要在获取到高度并赋值给Data变量，在传递给Android
	   Slide(value){//监听Slide的值变动，不为空时调用downState推个Android
		   	if(value!=""){
    //		   		console.log(value)
		   		downState(value)
		   	}
	   },
    },
}

Android代码：

这个的意思就是，我要让区域内距离顶部大于69px，小于轮播图高度的区域内的viewPager滑动失效，不在监听这里的滑动效果。

注：因为我头部距离顶部是固定的70px ，如果不是固定，则需要获取他的高度，这个也借鉴了别人的处理方式，只是把这个地方简化了一点。大致这样轮播图的冲突就没有了。

webView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //获取y轴坐标
                float y = event.getRawY();
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                            //如果触摸点的坐标在轮播区域内，则由webview来处理事件，否则由viewpager来处理
                            if (y > 69 && y < (69 + Integer.valueOf(height.split("px")[0]))) {
                                webView.requestDisallowInterceptTouchEvent(true);
                            }else{
                                webView.requestDisallowInterceptTouchEvent(false);
                            }
                        break;
                    case MotionEvent.ACTION_UP:
                        break;
                    case MotionEvent.ACTION_MOVE:
                        break;
                }
                return false;
            }
});

 

本来开始想的处理方案是：看用java能不能获取到组件Dom节点，直接让Dom节点失效viewpager。可惜没找到jar包。

 

如果有更好的处理方式 欢迎评论 留言。