weex-26-dom模块

D0BE7A90-F94A-4C9A-98D6-1EE3D44C1E5E.png

本节学习目标

• dom 滚动到指定组件
• dom 获取组件的布局信息

我们经常会看到上图所示的需求,当我们将列表向下滑动一段时间后,想要立刻回到顶部,这个时候就要用到本节所示的功能。

导入组件

const dom = weex.requireModule('dom')

• 1.第一步
  给组件设置引用使用ref

<cell ref='item0'></cell>//静态
<cell :ref="item+'index'">//动态

• 2.第二步
  跳转至指定引用的组件

API
scrollToElement(node, options)
参数

node {Node}：你要滚动到的那个节点
options {Object}：如下选项

offset {number}：一个到其可见位置的偏移距离，默认是 0
animated {bool}：设置是否有滚动动画，默认是 true

注意事项

这个API只能在 <scroller> 和 <list> 组件中用

演示代码

const el = this.$refs.item0[0]
dom.scrollToElement(el, {}) // 默认动画true 偏移量为0

解释

item0 是一个数组,为什么要用数组呢？因为有可能有多个组件都使用item0这个引用,建议组件尽量不要使用相同的标识

完整写法

scrollToTop(){
  const el = this.$refs.item0[0]
  dom.scrollToElement(el, {animated:false,offset:100})
}

获取组件的信息

这个一般不太常用

getComponentRect(ref, callback)

callback 参数格式如下

{
  result: true,
  size: {
    bottom: 60,
    height: 15,
    left: 0,
    right: 353,
    top: 45,
    width: 353
  }
}

示例代码如下

const el = this.$refs.item0[0]
const result = dom.getComponentRect(this.ref, option => {
      console.log('getComponentRect:', option)
 })