一、weex dom module

dom 是 weex 的内置模块之一,用于对 weex 页面里面的组件节点进行一些特定的操作。


想要在组件中使用 weex 内置组件,使用 weex 引入即可 const api = weex.require('ModuleName')

文档地址:

二、scrollToElement(ref,options)

这应该是使用最多的一个 api 了。

作用是让页面滚动到指定的 ref 的节点位置,但是这个 api 使用是有限制的,因为 weex 默认 div 是不支持滚动的,即使 overflow:scroll 也不行(native 环境)。

使用 dom.scrollToElement 滚动到的 ref 节点,必须是在可滚动组件内部的子节点。

目前内置可滚动组件包括:

  • list
  • scroller
  • waterfall

请注意,recycle-list 不支持使用 dom API 进行操作,因为它没有 Virtual DOM,也就没有 vNode。

参数说明:

参数类型描述
refNode要滚动到的节点
optionsObject配置对象
offsetnumber一个到可见位置的偏移距离,默认 0
animatedBoolean是否显示滚动动画,默认 true

基本的使用方式(js代码):

<script>
const {scrollToElement} = weex.requireModule('dom');
export default{
    methods:{
        scrollTo(refStr){
            scrollToElement(this.$refs[refStr][0])'
        }
    }
}
</script>

要查看完整的代码,可以看 dotwe 的示例:

1111.jpg

三、getComponentRect(ref, callback)

通过 ref 获取节点的布局信息。

dom.getComponentRect(this.$refs['node'][0],(options) => {
    console.log(options);
});

回调函数的参数是一个对象,而 size 是获取的布局内容

2222.jpg

如果要获取视图窗口的布局信息,可以使用 viewport 字符串作为第一个参数:

dom.getComponentRect('viewport', (options) => {
    console.log(options);
});

3333.jpg

四、addRule(type, contentObject)

这个 API 目前使用的还是比价少,因为 weex 只支持自定义字体 fontFace 的规则,其他不支持。

如果需要构建自定义的 font-family 可以使用。

官方文档中的示例代码:

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

dotwe.org 的在线预览:

注意事项:

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