hippy-vue-intersection-observer

hippy-vue-intersection-observer is a Hippy-Vue implementation of Intersection Observer.

It provides an easier way to detect view exposure in complex application.

Note: This component is inspired by and adapted from 'rn-intersection-observer'

Install

# Install using Yarn:
yarn add hippy-vue-intersection-observer

# or NPM:
npm install -S hippy-vue-intersection-observer

Usage

Target view

<hippy-vue-observer
  scope="YourOwnScope"
  :thresholds="[0.2, 0.5]"
  @on-change="onIntersectionChange"
>
{/* your own view */}
</hippy-vue-observer>


<script>

import { HippyVueObserver, HippyIntersectionEmitEvent } from "hippy-vue-intersection-observer";

// register hippy-vue-observer before use
Vue.use(HippyVueObserver);

// ...

export default {
  // ...
  methods: {
    onIntersectionChange(entry) {
      console.log(entry);
    },
  },
  
}

</script>

Trigger detection from Vue

methods: {
    onScroll(e) {
      HippyIntersectionEmitEvent("myScope");
    },
}

Trigger detection from Native

HippyMap hippyMap = new HippyMap();
hippyMap.pushString("scope", "YourOwnScope");
mEngineManager.getCurrentEngineContext()
    .getModuleManager()
    .getJavaScriptModule(EventDispatcher.class)
    .receiveNativeEvent("IntersectionObserverEvent", hippyMap);

// 可参考HippyEventObserverModule.m
[self sendEvent:@"IntersectionObserverEvent" params:@{ @"scope": @"YourOwnScope" }];
- (void)sendEvent:(NSString *)eventName params:(NSDictionary *)params {
    HippyAssertParam(eventName);
    [self.bridge.eventDispatcher dispatchEvent:@"EventDispatcher" 
                                    methodName:@"receiveNativeEvent" 
                                          args:@{@"eventName": eventName, @"extra": params ? : @{}}];
}

Props & Params

1) IntersectionObserver / hippy-vue-observer

| Props | Params Type | Description | |:-----------------------------------------------------------------------------------------------|:-----------------------------------------------------------|:-----------------------------------------------------------------| | scope | string | Scope of the target View, required in event trigger. | | rootMargin | {top: number, left: number, bottom: number, right: number} | Distance from screen edge of detect area. | | thresholds | number[] | Intersection ratios which should trigger intersection callbacks. | | throttle | number | Throttle time between each detection(ms). |

2) Intersection Callback (on-change)

Different from IntersectionObserver, hippy-vue-observer provides single parameter.

| Params | Params Type | Description | |:-----------------------------------------------------------------------------------------------------|:-----------------------------------------------------------|:-------------------------------------------------------------------| | boundingClientRect | {top: number, left: number, bottom: number, right: number} | Position of target View's edge. | | intersectionRatio | number | Intersection ratio of target View in detect area | | intersectionRect | {top: number, left: number, bottom: number, right: number} | Position of intersection area's edge. | | target | Ref | Ref of target View | | isIntersecting | boolean | Determine current intersection ratio is larger than any threshold. |

License

ISC