universal-element v0.0.6

title: element

universal-element

Get dom info.

This API needs to be used after DOM loading is successful. You can refer to the following usage scenarios:

• When entering the page, get the instance of the node object Page.onReady Use in
• Get node instance after switching component state through SetData, and use it in SetData callback

Support

Install

$ npm install universal-element --save

Usage

import { createElement, useEffect, Fragment } from 'rax';
import { getScrollOffset, getBoundingClientRect } from 'universal-element';

function App() {
  useEffect(() => {
    getScrollOffset('#container').then((ret) => {
      const { scrollTop, scrollLeft } = ret[0];
      console.log(scrollTop, scrollLeft);
    });

    getBoundingClientRect('#container').then((ret) => {
      const { width, height, top, left, right, bottom } = ret[0];
      console.log(width, height, top, left, right, bottom);
    });
  }, []);

  return (<>
    <View id='container'>test</View>
  </>)
}

Methods

getScrollOffset()

getScrollOffet('#container').then((ret) => {
  const { scrollTop, scrollLeft } = ret[0];
  console.log(scrollTop, scrollLeft);
});

Note

When all methods are used in the custom component of the WeChat applet, you need to add a second parameter to specify the custom component instance:

// When compiling the Rax applet, the link parameters are this._internal
getBoundingClientRect('#container', this).then((ret) => {
  const { width, height, top, left, right, bottom } = ret[0];
  console.log(width, height, top, left, right, bottom);
});