解决offsetTop在uniapp里面不能用

在UniApp中,offsetTop属性不适用于所有组件和元素。offsetTop是用于获取元素相对于父元素的顶部偏移量的属性,但不是所有的UniApp组件都具有offsetTop属性。

UniApp中常用的组件如<view><text><image>等是没有offsetTop属性的。如果你需要获取某个组件相对于页面或父组件的位置信息,可以考虑使用其他的方法。

一种常见的方法是使用uni.createSelectorQuery()boundingClientRect()函数来获取元素的位置信息。以下是一个示例:

<template>
  <view class="container">
    <view class="content" ref="myElem">
      <!-- 组件内容 -->
    </view>
  </view>
</template>

<script>
export default {
  mounted() {
    this.getElementOffsetTop();
  },
  methods: {
    getElementOffsetTop() {
      uni.createSelectorQuery()
        .in(this)
        .select('.content')
        .boundingClientRect(rect => {
          if (rect) {
            console.log('元素相对于页面顶部的偏移量:', rect.top);
          }
        })
        .exec();
    }
  }
};
</script>

在上述示例中,使用uni.createSelectorQuery()创建一个选择器查询对象,然后使用select()方法选择目标元素(这里选择.content,最后使用boundingClientRect()方法获取元素的位置信息。在回调函数中,你可以通过rect.top来获取元素相对于页面顶部的偏移量

请注意,.boundingClientRect()方法是一个异步操作,需要在exec()方法中执行才能获取到准确的位置信息。

通过使用上述方法,你可以在UniApp中获取元素的位置信息,而不依赖于offsetTop属性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值