小程序框架获取FXML节点信息

网友投稿 306 2024-06-29

获取界面上的节点信息

#7.1 FXML节点信息

节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。

小程序框架获取FXML节点信息

最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。

示例代码

const query = ft.createSelectorQuery()query.select('#the-id').boundingClientRect(function(res){
  res- // #the-id 节点的上边界坐标（相对于显示区域）})query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置})query.exec()
        已复制代码

上述示例中， #the-id 是一个节点选择器，与 CSS 的选择器相近但略有区别，请参见 SelectorQuery.select 的相关说明。

在自定义组件或包含自定义组件的页面中，推荐使用 this.createSelectorQuery 来代替 ft.createSelectorQuery ，这样可以确保在正确的范围内选择节点。

#7.2 FXML节点布局相交状态

节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

这一组API涉及的主要概念如下。

  • 参照节点：监听的参照节点，取它的布局区域作为参照区域。如果有多个参照节点，则会取它们布局区域的 交集 作为参照区域。页面显示区域也可作为参照区域之一。

  • 目标节点：监听的目标，默认只能是一个节点（使用 selectAll 选项时，可以同时监听多个节点）。

  • 相交区域：目标节点的布局区域与参照区域的相交区域。

  • 相交比例：相交区域占参照区域的比例。

  • 阈值：相交比例如果达到阈值，则会触发-的回调函数。阈值可以有多个。 以下示例代码可以在目标节点（用选择器 .target-class 指定）每次进入或离开页面显示区域时，触发回调函数。

示例代码

Page({
  onLoad: function(){
    ft.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // 目标节点 id
      res.dataset // 目标节点 dataset
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect- // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }})
        已复制代码

以下示例代码可以在目标节点（用选择器 .target-class 指定）与参照节点（用选择器 .relative-class 指定）在页面显示区域内相交或相离，且相交或相离程度达到目标节点布局区域的20%和50%时，触发回调函数。

示例代码

Page({
  onLoad: function(){
    ft.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect- // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }})
        已复制代码

注意

与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如遇祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如遇 fixed 定位的节点）。

在自定义组件或包含自定义组件的页面中，推荐使用 this.createIntersectionObserver 来代替 ft.createIntersectionObserver ，这样可以确保在正确的范围内选择节点。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 计算 示例 用法
上一篇:小程序框架之基础组件开发
下一篇:小程序框架之响应显示区域变化
相关文章

 发表评论

暂时没有评论，来抢沙发吧~