使 ViewPager + WebView 以连续方式垂直滑动

Question

我正在编写一个 html 页面阅读器，无法加载所有 .html，因为它的巨大且性能很差，所以我决定将其拆分为 3 个（或更多）html 并将其加载到嵌套有 View Pager 的 Web 视图中（滑动垂直）

我的问题是我应该慢慢滑动以滚动网页视图并快速滑动以更改视图寻呼机

缓慢滑动

快速滑动更改 ViewPager 上的页面

1) 我可以将 webview 扩展到 viewpager 内的所有内容高度吗？ 2) 只有topScroll或endScroll时才能改变viewpager item？

到目前为止我已经尝试过：

自定义网页视图

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        requestDisallowInterceptTouchEvent(true);

        return super.onTouchEvent(event);
    }

工作但无法更改浏览器项目

所以我想在到达顶部或末尾时启用/禁用它

移除 webview onTouchEvent 并添加：

   @Override
    protected void onScrollChanged(final int l, final int t, final int oldl, final int oldt) {
        requestDisallowInterceptTouchEvent(true);



        int height = (int) Math.floor(this.getContentHeight() * this.getScale());
        int webViewHeight = this.getMeasuredHeight();

        boolean scrollTop = this.getTop() == t;
        boolean scrollEnd = this.getScrollY() + webViewHeight >= height;

        if(scrollTop || scrollEnd) {
            requestDisallowInterceptTouchEvent(false);
        } 

随机工作，最常见的是当我更改页面时，我必须向下滚动并向上滚动以触发 requestDisallow 为 false 以便我可以更改页面 =[

Vertical CustomViewPage 是这个->

public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

Answer 1

• 第一，我认为将内容拆分为 3 个不同的 HTML 文件并将它们放在 3 个不同的 WebView 上是个坏主意。
• 3 fils 可能是个好主意，但 ViewPager 的 3 个视图中的 3 个 WebView 是个坏主意。

• 相反，您应该使用“.js”/“jQuery”检测网页的顶部和底部，并在同一 WebView 中路由页面/HTML。

  window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // 你在页面底部 }};

有很多方法可以检测 HTML 内容的 TOP 和 BOTTOM。

不过，如果您想将评论的高度增加到内容高度，请使用 Getting WebView Content height once its loaded Android 它对我有用。