Observe 观测容器

简介

观测容器。可用于观测容器内容在页面中的显示情况。

属性说明

属性名	类型	默认值	必填	说明
state	String	TRUE	否	观测开关，用于开启或者关闭观测
targetQuerySelector	String	观测容器本身	否	指定观测 DOM，参数参考 querySelector，默认是观测容器本身
options	Object	{root: null, threshold:0}	否	IntersectionObserver 的 option 属性，用于控制观察者的回调函数的被调用时的环境
change	EventHandle		否	根据传入的 options，当观测元素可视区域符合 options 的配置是，会触发此事件

示例

<scroll-view
  class="scroll-container"
  :scroll-y="true"
  :scroll-top="scrollTop"
  :refresher-enabled="refresherEnabled"
  :refresh-state="refreshState"
  bind:refresh="pulldownRefresh"
  bind:scrolltolower="scrollToLower"
>
  <observe
    bind:change="handleListVisibleChange"
    s-for="(item, index) in recommendList"
    :key="item.id"
    :state="item.state"
    :options="observeOption"
    :data-index="index"
  >
    <view class="list-item__gap"></view>
    <component
      :is="item.componentName"
      class="list-item forbidselect"
      :data="item"
      bindopen="handleNavigateToOutside"
      bindshare="handleShare"
    ></component>
  </observe>
  <view
    class="hasmore-wrap flex-center-center"
    s-if="hasMore && network && recommendList.length"
  >
    <loading></loading>
  </view>
</scroll-view>

Page({
    ...
    handleListVisibleChange (data) {
      console.log(data)
     /* {
        dataset,
        value: {
          boundingClientRect,
          intersectionRatio,
          intersectionRect,
          isIntersecting,
          rootBounds,
          time,
        },
      }
      */
    }
})