weex-26-dom模块

1594482-9698973b5243a845.png
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)
 })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值