HarmonyOS 鸿蒙Next：web组件嵌套本地html文件怎么获取滑动位置

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：web组件嵌套本地html文件怎么获取滑动位置

web组件 嵌套html页面 如何获取html滑动到底部


更多关于HarmonyOS 鸿蒙Next：web组件嵌套本地html文件怎么获取滑动位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

可以通过 JavaScript 监听滚动事件来实现。当用户滚动到底部时，可以触发一个事件或调用一个函数。

1. 在鸿蒙 Next 中嵌入 Web 组件

在鸿蒙 Next 中创建一个 Web 组件，并嵌入一个 HTML 页面：

import { Web } from '[@ohos](/user/ohos)/tv-ui';

@Entry
export class MyApp {
build() {
return (
<Web
        src=“pages/index.html”
style=“width: 100%; height: 100%;”
/>
);
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

2. 在嵌入的 HTML 页面中添加 JavaScript 代码

在 pages/index.html 中添加以下 JavaScript 代码来监听滚动事件：

<!DOCTYPE html>
<html>
<head>
<title>Web Component with Scroll Event</title>
<style>
body {
height: 2000px; /* 设定页面高度以便测试滚动 */
margin: 0;
}
</style>
</head>
<body>
<script>
document.addEventListener(‘scroll’, function() {
// 获取滚动高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;


  </span></span><span class="hljs-comment"><span class="xml"><span class="javascript"><span class="hljs-comment">// 判断是否滚动到底部</span></span></span></span><span class="xml"><span class="javascript">
  </span></span><span class="hljs-keyword"><span class="xml"><span class="javascript"><span class="hljs-keyword">if</span></span></span></span><span class="xml"><span class="javascript"> (scrollTop + windowHeight &gt;= documentHeight) {
    console.log(</span></span><span class="hljs-string"><span class="xml"><span class="javascript"><span class="hljs-string">'Scrolled to bottom'</span></span></span></span><span class="xml"><span class="javascript">);
    </span></span><span class="hljs-comment"><span class="xml"><span class="javascript"><span class="hljs-comment">// 触发事件或调用函数</span></span></span></span><span class="xml"><span class="javascript">
    onScrollToBottom();
  }
});

</span></span><span class="hljs-function"><span class="hljs-keyword"><span class="xml"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span></span><span class="xml"><span class="javascript"><span class="hljs-function"> </span></span></span><span class="hljs-title"><span class="xml"><span class="javascript"><span class="hljs-function"><span class="hljs-title">onScrollToBottom</span></span></span></span></span><span class="hljs-params"><span class="xml"><span class="javascript"><span class="hljs-function"><span class="hljs-params">()</span></span></span></span></span><span class="xml"><span class="javascript"><span class="hljs-function"> {</span></span></span></span><span class="xml"><span class="javascript">
  </span></span><span class="hljs-comment"><span class="xml"><span class="javascript"><span class="hljs-comment">// 在这里处理滚动到底部的逻辑</span></span></span></span><span class="xml"><span class="javascript">
  alert(</span></span><span class="hljs-string"><span class="xml"><span class="javascript"><span class="hljs-string">'Scrolled to bottom'</span></span></span></span><span class="xml"><span class="javascript">);
}

</script>
</body>
</html>
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next：web组件嵌套本地html文件怎么获取滑动位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


怎么在鸿蒙web组件页面 获取到html页面 滚动到底部的事件呢

计算页面的滚动位置以及页面的高度，然后比较这些值来确定是否滚动到了底部

在HarmonyOS的Web组件中嵌套本地HTML文件并获取滑动位置，通常需要依赖于WebView组件的交互能力。你可以通过WebView的JavaScript接口（如addJavascriptInterface）来桥接Java/Kotlin（或其他HarmonyOS支持的语言）与HTML/JavaScript之间的交互。

在HTML中，你可以使用JavaScript监听滚动事件（如onscroll）来获取滚动位置（window.scrollY或element.scrollTop），并通过WebView提供的接口将位置信息传递给HarmonyOS应用层。

确保WebView已正确加载HTML文件，并适当设置权限和接口以允许双向通信。

如果问题依旧没法解决请加我微信，我的微信是itying888。

更多关于HarmonyOS 鸿蒙Next：web组件嵌套本地html文件怎么获取滑动位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


回到顶部