微信小程序自定义组件boundingClientRect获取到的rect值为null

最新推荐文章于 2024-09-24 10:45:05 发布

弓弧名家_玄真君

最新推荐文章于 2024-09-24 10:45:05 发布

阅读量8.1k

点赞数 5

分类专栏： javascript 文章标签：小程序

本文链接：https://blog.csdn.net/txl910514/article/details/102584093

版权

javascript 专栏收录该内容

92 篇文章 0 订阅

订阅专栏

本文详细介绍了在自定义组件中如何正确使用SelectorQuery.in()方法来获取节点布局信息，避免因未使用.in(this)而导致的rect值为null的问题。通过具体示例代码展示了如何设置自定义组件的swiperHeight属性。

摘要由CSDN通过智能技术生成

解决办法：

在自定义组件内获取必须用SelectorQuery.in()

Component({
  lifetimes: {
    ready() {
      const query = wx.createSelectorQuery().in(this)
      const num = Math.ceil(this.data.picList.length / LINE_LENGTH)
      query.select('.tab-content-item').boundingClientRect((rect) => {
        this.setData({
          swiperHeight: rect.height * num + 'rpx'
        })
      }).exec()
    }
  },
})

const query = wx.createSelectorQuery().in(this)
这一句是最重要的，要用.in(this)，this传入的是自定义组件的实例。
否则获取到的rect值为null

https://segmentfault.com/a/1190000019548718?utm_source=tag-newest&tdsourcetag=s_pcqq_aiomsg