dom

dom 模块用于对 weex 页面里的组件节点进行一部分特定操作。

  • scrollToElement将 list 的某个子节点滚动到当前视口
  • getComponentRect获取某个组件的 bounding rect 布局信息
  • addRule添加 font-face rule
  • getLayoutDirection0.20.0+获取某个组件的布局方向(rtl、lrt、inherit)

API

scrollToElement

让页面滚动到 ref 对应的组件,这个 API 只能用于可滚动组件的子节点,例如 <scroller><list>, <waterfall> 等可滚动组件中。

scrollToElement(ref, options)

  • @ref,要滚动到的那个节点。
  • @options
    • offset,一个到其可见位置的偏移距离,默认是 0
    • animated,是否需要附带滚动动画,默认是 true。示例dom - 图1

getComponentRect

获取某个元素 View 的外框。

getComponentRect(ref, callback)

  • @ref,要滚动到的那个节点。
  • @callback,异步方法,通过回调返回信息。回调方法中的数据样例:
  1. {
  2. result: true,
  3. size: {
  4. bottom: 60,
  5. height: 15,
  6. left: 0,
  7. right: 353,
  8. top: 45,
  9. width: 353
  10. }
  11. }

TIP

如果要获取 viewport 的包围框,第一个参数 ref 可以指定为 'viewport'

Demodom - 图2

TIP

  • 此方法需要在节点渲染后调用才能获取正确的信息,可在 mounted 或 更新数据后 updated 中调用
  • 如果想要获取到 Weex 视口容器的布局信息,可以指定 ref 为字符串 'viewport',即 getComponentRect('viewport', callback).

getLayoutDirection 0.20.0+

获取当前的布局方向,是 Left to Right,还是 Right to Left。

getLayoutDirection(ref, callback)

  • @ref,要操作的节点。
  • @callback,回调方法中返回排版方向信息。callback方法返回数据样例:
  1. {
  2. "result": "rtl",
  3. }

示例

  1. const element = this.$refs['kkk'][0];
  2. dom.getLayoutDirection(element, function(ret) {
  3. console.log(ret.result);
  4. });

addRule 0.12.0+

Weex 提供 DOM.addRule 以加载自定义字体。开发者可以通过指定 font-family加载 iconfontcustom font

开发者可以使用下面的代码加载自定义字体:

  1. const domModule = weex.requireModule('dom')
  2. domModule.addRule('fontFace', {
  3. 'fontFamily': "iconfont2",
  4. 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
  5. });

addRule(type, contentObject)

  • @fontFace 协议名称,不可修改。
  • @fontFamily font-family的名称。
  • @src 字体地址,url('') 是保留字段,其参数如下:
    • http. 从HTTP请求加载, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf&#39;)
    • https. 从HTTPS请求加载, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf&#39;)
    • 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字段不全。

注意

addRule 方法里的 fontFamily 可以随意取。这个名字不是字体真正的名字。字体真正的名字(font-family),也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字(font-family)足够特殊,否则在向系统注册时可能发生冲突,导致注册失败,你的字符被显示为‘?’。

如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中,设置一个特殊的 font-family 名字。默认是 “iconfont”,但极大可能发生冲突。

调用addRulebeforeCreate 中是被推荐的。

示例dom - 图3.