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 @uni/element --save

Usage

import { createElement, useEffect, Fragment } from 'rax';
import { getScrollOffset, getBoundingClientRect } from '@uni/element';

function App() {
  useEffect(() => {
    window.addEventListener('setDataFinished', () => {
      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
// When compiling the Rax runtime，the link parameters are document.querySelector('#container')._internal
getBoundingClientRect('#container', this).then((ret) => {
  const { width, height, top, left, right, bottom } = ret[0];
  console.log(width, height, top, left, right, bottom);
});