Viewpager和webview里面的轮播图出现了滑动冲突-白红宇

Viewpager和webview里面的轮播图出现了滑动冲突

阅读量：6247 次

发布时间：2019-06-22

本文共 6903 字，大约阅读时间需要 23 分钟。

http://www.jianshu.com/u/0389e94c1f7e

借鉴这个链接的

mPagerDesc这个对象，主要用来存储轮播海报的坐标的

有四个属性需要设置，这四个属性都需要通过js传过来：

String left, String top, String width, String height

js那边，调用getMessage方法，就要传四个参数：

var box = document.documentElement.getBoundingClientRect();

//需要左，上，右，下坐标

JsHObject.getMessage(box.left, box.top, img_width, height);

document.documentElement，这个也是一个element，所以就尝试一下把这个传进去了

所以方法名，变量名很重要，命名对了，别人一眼就知道是什么了

文章说的

getEmementRect(e) 是一个方法，按方法的命名，可以猜到参数是Element类型的

方法体里面，

var box = e.getBoundingClientRect();

var x = box.left;

var y = box.top;

这三句代码，可以获取到横坐标和纵坐标，然后另外的宽和高，你已经获取到了，

直接传进去就可以了

现在老规矩上代码了

在js里面我们要找到获取宽高和坐标的地方如果没有找到就找js那边要高度和宽度的位置

我这边是

var reset_margin_left = function () {    var img_width = document.body.clientWidth;告诉我们宽度了    ele[0].style.height = img_width*7 / 15 + "px";这是告诉我们高度//下面是写的重点    var box = document.documentElement.getBoundingClientRect();获取页面坐标点    var height = img_width*7 / 15;获取高度    //需要左，上，右，下坐标    JsHObject.getMessage(box.left,box.top,img_width,height);//box.top和box.left我们将左边和上边的左边点以及   宽高传过去}

现在就是Android这边了

首先要新建一个类

public class PagerDesc {        private int top;        private int left;        private int right;        private int bottom;    public int getTop() {        return top;    }    public void setTop(int top) {        this.top = top;    }    public int getLeft() {        return left;    }    public void setLeft(int left) {        this.left = left;    }    public int getRight() {        return right;    }    public void setRight(int right) {        this.right = right;    }    public int getBottom() {        return bottom;    }    public void setBottom(int bottom) {        this.bottom = bottom;    }    public PagerDesc(int top, int left, int right, int bottom) {        this.top = top;        this.left = left;        this.right = right;        this.bottom = bottom;    }}

然后在fragment或者activity里面webview

wv_home.addJavascriptInterface(new HomeFragment.JsHObject(),"JsHObject");

wv_home.setOnTouchListener(new View.OnTouchListener() {        @Override        public boolean onTouch(View v, MotionEvent event) {            //获取y轴坐标            float y = event.getRawY();            switch (event.getAction()) {                case MotionEvent.ACTION_DOWN:                    if (null != mPagerDesc) {                        int top = mPagerDesc.getTop();                        int bottom = top + (mPagerDesc.getBottom() - mPagerDesc.getTop());                        //将css像素转换为android设备像素并考虑通知栏高度                        DisplayMetrics metric = getContext().getResources().getDisplayMetrics();                        top = (int) (top * metric.density) + ScreenUtil.getStatusHeight(getActivity());                        bottom = (int) (bottom * metric.density) + ScreenUtil.getStatusHeight(getActivity());                        //如果触摸点的坐标在轮播区域内，则由webview来处理事件，否则由viewpager来处理                        if (y > top&& y

private class JsHObject {    @JavascriptInterface    public void getMessage(String left, String top, String width, String height){        Log.e("hheight","hheight="+ height);        int leftValue = (int) Double.parseDouble(left);        int topValue = (int) Double.parseDouble(top);        int widthValue = (int) Double.parseDouble(width);        int heightValue = (int) Double.parseDouble(height);        mPagerDesc = new PagerDesc(leftValue, topValue, widthValue, heightValue);    }}

这样就可以了。

下面是fragment全部的你们可以借鉴

package com.lsy.tm.fragment;import android.content.Context;import android.os.Bundle;import android.support.annotation.IntegerRes;import android.util.DisplayMetrics;import android.util.Log;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.webkit.JavascriptInterface;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.RadioGroup;import com.lsy.tm.GlobalVar;import com.lsy.tm.R;import com.lsy.tm.bean.PagerDesc;import com.lsy.tm.util.MJavascriptInterface;import com.lsy.tm.util.ScreenUtil;import static com.lsy.tm.app.TmApplication.context;import static com.lsy.tm.app.TmApplication.getContext;/** * Created by lsy on 2017/5/4. */public class HomeFragment extends BaseFagment{    private  PagerDesc mPagerDesc;    RadioGroup radiogroup;    private WebView wv_home;    private String urlString = "你的地址url";    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.fragment_home_liao,container,false);        initView(view);        initDate();        return view;    }    private void initView(final View view) {        wv_home= (WebView) view.findViewById(R.id.wv_home);        radiogroup= (RadioGroup) getActivity().findViewById(R.id.radiogroup);    }    private void initDate() {        wv_home.setWebViewClient(new WebViewClient(){});        wv_home.getSettings().setJavaScriptEnabled(true);        //设置 缓存模式        wv_home.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);        wv_home.setWebChromeClient(new WebChromeClient(){            public void onProgressChanged(WebView view,int newProgress){                if (newProgress==100) {                    if (wv_home.canGoBack()) {                        radiogroup.setVisibility(View.GONE);                    } else {                        radiogroup.setVisibility(View.VISIBLE);                    }                }            }        });        WebSettings settings=wv_home.getSettings();        settings.setAllowFileAccessFromFileURLs(true);        settings.setAllowUniversalAccessFromFileURLs(true);        settings.setJavaScriptEnabled(true);//设置js可用        wv_home.addJavascriptInterface(new HomeFragment.JsHObject(),"JsHObject");        wv_home.loadUrl(urlString);        wv_home.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                //获取y轴坐标                float y = event.getRawY();                switch (event.getAction()) {                    case MotionEvent.ACTION_DOWN:                        if (null != mPagerDesc) {                            int top = mPagerDesc.getTop();                            int bottom = top + (mPagerDesc.getBottom() - mPagerDesc.getTop());                            //将css像素转换为android设备像素并考虑通知栏高度                            DisplayMetrics metric = getContext().getResources().getDisplayMetrics();                            top = (int) (top * metric.density) + ScreenUtil.getStatusHeight(getActivity());                            bottom = (int) (bottom * metric.density) + ScreenUtil.getStatusHeight(getActivity());                            //如果触摸点的坐标在轮播区域内，则由webview来处理事件，否则由viewpager来处理                            if (y > top&& y

感谢孤舟指点！