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

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 回调来优化用户体验，例如在页面开始加载时显示加载指示器，在页面加载完毕时隐藏它。

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

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 4月21日

悬赏问题

  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 在虚拟机环境下完成以下，要求截图！
  • ¥15 求往届大挑得奖作品（ppt…）
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见