怎么判断webview滚动到最下方?

怎么判断webview滚动到最下方?

HarmonyOS
2024-10-14 11:57:33
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

要判断一个 ​​WebView​​​ 是否滚动到最下方,可以通过在 ​​JavaScript​​ 中检查当前的滚动位置和文档的总高度。下面是一些常见的方法,具体实现可能根据所使用的平台(如 Android, iOS)有所不同。

### 在Android中使用WebView

在 Android 上,你可以通过 JavaScript 与 WebView 交互来检测滚动位置:

  1. 启用 JavaScript 支持: 确保你的 WebView 启用了 JavaScript:
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
  1. 添加 JavaScript 接口: 创建一个接口,用于接收 JavaScript 的回调:
public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void onScrollBottom() {
        // 响应滚动到底部事件
        Toast.makeText(mContext, "Scrolled to bottom", Toast.LENGTH_SHORT).show();
    }
}
  1. 绑定接口到 WebView
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
  1. 注入 JavaScript 检测代码: 在加载网页时,注入 JavaScript 来监听滚动事件:
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        // 注入 JavaScript
        view.loadUrl("javascript:(function() {" +
            "window.onscroll = function() {" +
                "if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {" +
                    "Android.onScrollBottom();" +
                "}" +
            "};" +
        "})()");
    }
});

这样,当用户滚动到页面底部时,JavaScript 会调用 ​​Android.onScrollBottom()​​ 方法。

### 在iOS中使用WKWebView

在 iOS 平台上的 ​​WKWebView​​,可以使用 JavaScript 来获取滚动位置并使用 Swift 或 Objective-C 进行判断:

  1. 启用 JavaScript: 默认情况下,WKWebView 是支持 JavaScript 的。
  2. 注入 JavaScript: 在页面加载完成后,通过 evaluateJavaScript 方法执行脚本:
webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
    if complete != nil {
        self.webView.evaluateJavaScript("window.onscroll = function() {" +
            "if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {" +
                "window.webkit.messageHandlers.scrollHandler.postMessage('bottom');" +
            "}" +
        "};", completionHandler: nil)
    }
})
  1. 设置消息处理器: 使用 WKScriptMessageHandler 来接收来自 JavaScript 的消息:
class ViewController: UIViewController, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "scrollHandler", let messageBody = message.body as? String {
            if messageBody == "bottom" {
                print("Scrolled to bottom")
            }
        }
    }
}

通过这些方法,你可以在不同的平台上检测 ​​WebView​​ 是否滚动到了最下方。请注意,这些解决方案假设你有权访问网页内容并能安全地执行 JavaScript。如果是加载第三方网页,这种方法可能会受到限制。

分享
微博
QQ
微信
回复
2024-10-14 13:51:56
zxjiu

可以在onPageEnd事件回调获取web组件的内容高度,在onScroll事件中判断是否滚动到最底部。

// demo.ets  
import web_webview from '@ohos.web.webview'  
  
@Entry  
@Component  
struct WebComponent {  
  webviewController: web_webview.WebviewController = new web_webview.WebviewController()  
  @State webHeight: number = 0  
  
  build() {  
    Column() {  
      Web({ src: 'www.example.com', controller: this.webviewController })  
        .onPageEnd((event) => {  
          console.log('onPageEnd:::::::')  
          this.webHeight = this.webviewController.getPageHeight()  
          console.log('webHeight = ' + this.webHeight)  
        })  
        .onScroll(event => {  
          console.log('scroll::::::' + event.yOffset)  
          if (event.yOffset === this.webHeight) {  
            console.log('reach end:::::')  
          }  
        })  
    }  
  }
分享
微博
QQ
微信
回复
2024-10-14 15:46:38
相关问题
Web组件怎么知道滚动到顶部了
816浏览 • 1回复 待解决
list组件无法滚动到底部
1166浏览 • 1回复 待解决
HarmonyOS swiper如何滚动到任意页面?
364浏览 • 1回复 待解决
基于webView的嵌套滚动
480浏览 • 1回复 待解决
HarmonyOS 如何检测webview滚动是否触底
331浏览 • 1回复 待解决
tab-bar下方的下划线怎么去掉?
3055浏览 • 1回复 待解决