Observe - Observation Container

Introduction

The Observe component is used to observe the visibility of the content within a container on a page.

Property Description

Property Name	Type	Default Value	Required	Description
state	String	TRUE	No	The observation switch to enable or disable observation
targetQuerySelector	String	Observation container itself	No	Specifies the observed DOM element, parameter reference querySelector. The default is the observation container itself
options	Object	{root: null, threshold:0}	No	IntersectionObserver's option property, used to control the environment in which the observer's callback function is called
change	EventHandle		No	Triggered when the observed element's visible area meets the configuration specified in options

Example

<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,
      },
    }
    */
  },
});