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.
addRulemethod is currently used only with font-face supportability.
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
NOTE: You can use
weex.requireModule('dom')to requrie the dom module, and use
weex.requireModule('dom').scrollToElementto call this API.
ref(Node): the referenced component who is meant to scroll into the view.
offset(number): An space on top of the ref component, which is also scrolling down to the visual viewport. Default is
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.
getComponentRect(ref, callback) v0.9.4+#
You can get the bounding rect of the referenced component using this API.
An example callback result should be like:
If you want to get the bounding rect of outside viewport of the weex container, you can specify the
ref as a literal string
addRule(type, contentObject) v0.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')
You can name
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 http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.