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.
::: tip The addRule
method 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 <scroller>
or <list>
component.
offset
, an space on top of the ref component, which is also scrolling down to the visual viewport. Default is 0
.animated
, a boolean 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.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 } }
::: tip 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)
. :::
You can get the layout direction the referenced component using this API.
An example callback result should be like:
{ "result": "rtl", }
Demo
const element = this.$refs['kkk'][0]; dom.getLayoutDirection(element, function(ret) { console.log(ret.result); });
Weex provide the ability of loading custom through DOM.addRule. Developers can load iconfont and custom font by specifying the font-family.
Developers may use the following code snippet to load their font:
const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': "iconfont2", 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" });
http
. Read from http, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
https
. Read from https, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
local
, Android ONLY. Read from assets directory e.g. url('local://foo.ttf')
, the foo.ttf is in your android assets directory.file
. Read from a local file, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
data
. Read from a base64 data source, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')
, the above data field is only a part of the actual data.::: warning 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 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.
Calling addRule
in beforeCreate
is recommended. :::
Demo.