The dom module is used to manipulate the components in weex pages.

You can use these APIs to get a component’s bounding rect in the page, or scroll a list to some specific component, or add a font-face rule to the page and so on.

Note: The addRule method is currently used only with font-face supportability.


scrollToElement(ref, options)#

Scroll the scrollable component to the referenced component. This API should only be used in the children components of a scrollable component, such as in a <scroller> or <list> component.

NOTE: You can use weex.requireModule('dom') to requrie the dom module, and use weex.requireModule('dom').scrollToElement to call this API.


  • ref(Node): the referenced component who is meant to scroll into the view.
  • options(object):
    • offset(number): An space on top of the ref component, which is also scrolling down to the visual viewport. Default is 0.
    • animated (bool): 0.10+ Indicates whether a scroll animation should be played. If set to false, the ref component will jump into the view without any transition animation. Default is true.


Scroll To Floor

getComponentRect(ref, callback) v0.9.4+#

support: >=0.9.4

You can get the bounding rect of the referenced component using this API.

An example callback result should be like:

result: true,
size: {
bottom: 60,
height: 15,
left: 0,
right: 353,
top: 45,
width: 353

If you want to get the bounding rect of outside viewport of the weex container, you can specify the ref as a literal string 'viewport', like getComponentRect('viewport', callback).


get box’s rect

addRule(type, contentObject) v0.12.0+#

support: >=0.12.0

You can add certain rules for dom throught this API. Now we only support fontFace for building a custom font-family. You can use the built font-family in your project for text component directly.


const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('')"

Important Notes

You can name fontFamily in addRule as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a ‘?’.

Specially, if you are using to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.


add rule fontface

Edit this page on GitHub