dom
模块用于对 weex 页面里的组件节点进行一部分特定操作。
scrollToElement
将 list 的某个子节点滚动到当前视口getComponentRect
获取某个组件的 bounding rect 布局信息addRule
添加 font-face rulegetLayoutDirection
获取某个组件的布局方向(rtl、lrt、inherit)让页面滚动到 ref 对应的组件,这个 API 只能用于可滚动组件的子节点,例如 <scroller>
,<list>
, <waterfall>
等可滚动组件中。
offset
,一个到其可见位置的偏移距离,默认是 0
。animated
,是否需要附带滚动动画,默认是 true。获取某个元素 View 的外框。
回调方法中的数据样例:
{ result: true, size: { bottom: 60, height: 15, left: 0, right: 353, top: 45, width: 353 } }
::: tip 如果要获取 viewport 的包围框,第一个参数 ref
可以指定为 'viewport'
。 :::
::: tip
mounted
或 更新数据后 updated
中调用:::
获取当前的布局方向,是 Left to Right,还是 Right to Left。
callback方法返回数据样例:
{ "result": "rtl", }
示例
const element = this.$refs['kkk'][0]; dom.getLayoutDirection(element, function(ret) { console.log(ret.result); });
Weex 提供 DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfont 和 custom font。
开发者可以使用下面的代码加载自定义字体:
const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': "iconfont2", 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" });
http
. 从HTTP请求加载, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
https
. 从HTTPS请求加载, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
local
, Android ONLY. 从assets目录读取, e.g. url('local://foo.ttf')
, foo.ttf 是文件名在你的assets目录中.file
. 从本地文件读取, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
data
. 从base64读取, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')
, 上述data字段不全。::: warning 注意 addRule
方法里的 fontFamily
可以随意取。这个名字不是字体真正的名字。字体真正的名字(font-family),也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字(font-family)足够特殊,否则在向系统注册时可能发生冲突,导致注册失败,你的字符被显示为‘?’。
如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中,设置一个特殊的 font-family 名字。默认是 “iconfont”,但极大可能发生冲突。
调用addRule
在 beforeCreate
中是被推荐的。 :::
示例.