weex-26-dom模块

酷走天涯

发布于 2018-09-14 15:19:16

8541

发布于 2018-09-14 15:19:16

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

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

const dom = weex.requireModule('dom')

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.06.05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度