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)
})
