zjyzhj 2024-04-21 01:33 采纳率: 0%
浏览 67

Android webview 页面滑动效果实现网页前进后退

请问该怎么实现下面这个效果呢？
它这个网页前进后退有个很好的过渡效果，类似翻页功能。
来给人给下思路，折腾好久了。

img

  • 写回答

7条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-21 01:33
    关注

    引自免费微信小程序：皆我百晓生

    要实现 Android WebView 中的页面滑动效果，可以采用以下步骤：

    1. 首先确保在 WebView 初始化时启用了 DOM 存储和数据库存储。这可以通过在 Java 代码中设置相关属性来完成：
    WebView webView = (WebView) findViewById(R.id.web_view);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setDatabaseEnabled(true);
    1. 使用 JavaScriptInterface 让 Java 和 JavaScript 之间进行通信。这样可以在 JavaScript 中调用 Java 方法来触发页面切换动画：
    // 创建一个简单的 JavaScript Interface
class MyJavaScriptInterface {
    @JavascriptInterface
    public void goBack() {
        // 回调方法，用于执行回退操作
    }

    @JavascriptInterface
    public void goForward() {
        // 回调方法，用于执行前进操作
    }
}

// 将 JavaScript Interface 设置到 WebView
webView.addJavascriptInterface(new MyJavaScriptInterface(), "android");
    1. 在 HTML 页面上，使用 JavaScript 实现滑动手势监听并调用 Java 方法：
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        /* 添加一些样式，以便更好地呈现翻页效果 */
        body, html {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .page {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
    </style>
</head>
<body>
    <!-- 假设我们有三个页面 -->
    <div class="page" id="page1">Page 1</div>
    <div class="page" id="page2">Page 2</div>
    <div class="page" id="page3">Page 3</div>

    <script>
        var currentPage = 1;
        var pages = document.getElementsByClassName('page');

        // 监听 touchstart、touchmove 和 touchend 事件
        function handleGesture(e) {
            const touch = e.touches[0];
            const dx = touch.pageX - touch.startX;

            if (dx > 50 && currentPage < pages.length - 1) {
                android.goBack();
                currentPage++;
            } else if (dx < -50 && currentPage > 1) {
                android.goForward();
                currentPage--;
            }
        }

        pages.forEach((page, index) => {
            page.addEventListener('touchstart', (e) => {
                touch.startX = e.touches[0].pageX;
            });

            page.addEventListener('touchmove', handleGesture);
            page.addEventListener('touchend', handleGesture);
        });
    </script>
</body>
</html>
    1. 现在你需要处理 goBack() 和 goForward() 方法，它们应该在 Java 代码中实现相应的逻辑，例如通过 WebView 的 loadUrl() 方法加载不同的 URL 或者使用 WebChromeClient 进行页面缓存管理，并添加动画效果。

    这是一个基础的实现方案。为了实现更平滑的翻页效果，你可能需要引入一些库，比如 Lottie 动画库来制作翻页动画，并将动画应用到页面切换的过程中。此外，你还可以考虑使用 WebView 的 onPageStarted 和 onPageFinished 回调来优化用户体验，例如在页面开始加载时显示加载指示器，在页面加载完毕时隐藏它。

    注意：上述代码仅作为参考，实际项目中可能需要根据具体需求进行调整。如果你对某些部分不熟悉，我可以提供更详细的解释或示例代码。

    评论 编辑记录

报告相同问题？

  • 深入掌握Android WebView开发指南
    2025-05-12 18:22
    weixin_42668301的博客 这可以通过设置自定义的来完成：@Override// 自定义页面开始加载逻辑@Override// 如果URL符合自定义条件，则在应用内处理，否则允许WebView打开// 执行自定义操作});手势操作的监听允许我们对用户的触摸动作进行更...
  • Android综合应用开发：网页浏览与音乐播放功能实现
    2024-09-24 14:59
    芝士校园的博客 简介：本源码详尽解析了如何在... 类播放音乐，以及实现动画效果，初学者能够掌握Android的多媒体处理和UI交互原理。源码包含完整的生命周期管理、视图布局编写、组件间通信以及动画使用等关键技术和实...
  • Android底部滑动弹出窗口源码
    2017-11-06 18:15
    在本项目中，可能有专门的类或方法处理与WebView相关的业务，例如加载特定的网页、处理页面的前进后退等。 底部菜单导航栏是移动应用的标准组件，它通常由几个图标按钮组成，每个按钮对应一个不同的功能模块。在...
  • webview的使用套餐，安卓面试题2021pdf
    2022-01-25 14:44
    m0_66264699的博客 为了方便开发者实现在app内展示网页并与网页交互的需求，Android SDK提供了WebView组件。 它继承自AbsoluteLayout，展示网页的同时，也可以在其中放入其他的子View。 现如今，Hybrid应用似乎占据的APP的主流类型，...
  • Flutter笔记：关于WebView插件的用法（下）
    2024-06-12 09:07
    jcLee95的博客 WebView是一个可以在移动应用中显示网页的组件。它基于原生的WebView控件(如iOS中的WKWebView和Android中的WebView)，提供了加载URL、显示HTML内容、与JavaScript交互等功能。通过在Flutter应用中使用WebView，我们...
  • LLQ.rar_android_llq浏览器
    2022-09-23 02:54
    LLQ浏览器很可能通过WebView加载网页，并利用WebView提供的API实现诸如前进、后退、刷新、阻止弹窗等操作。开发者可以通过自定义WebViewClient和WebChromeClient，进一步控制网页的加载过程和用户交互行为。 2. ...
  • 构建Android简易网页浏览器：全过程详解
    2025-08-05 18:27
    Kay Lam的博客 在开始Android开发之前，理解其开发环境是至关重要的。Android SDK（Software Development Kit）是进行Android应用开发的基础工具包，提供了开发者所需的API、库、调试工具、模拟器以及文档等资源。Android中提供了...
  • 安卓Android源码——仿UCWEB界面源码.zip
    2021-10-14 08:56
    通过分析和研究这个源码，开发者可以学习到如何设计和实现一个功能丰富的移动浏览器界面，包括但不限于地址栏、书签管理、前进后退按钮、页面加载进度条等元素。 【标签】: "安卓"、"源码"、"android" 这三个标签...
  • Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（下）
    2022-02-23 15:29
    低吟~浅唱的博客 Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（下）
  • Android应用源码之仿UCWEB界面源码.zip
    2021-10-14 22:27
    源码会展示如何配置和使用WebView，包括加载URL、设置WebViewClient和WebChromeClient、启用JavaScript支持、处理页面的前进后退等功能。 3. **自定义控件**：为了达到UCWEB的特色效果，源码中可能会包含自定义View...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 4月21日