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

黑眼圈
• 阅读 18971

解决办法:

在自定义组件内获取必须用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

点赞
收藏
评论区
推荐文章
胡哥有话说 胡哥有话说
5年前
微信小程序支付功能全流程实践
前言微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑!知己知彼,方能百战不殆小程序支付流程图小程序支付交互流程图(https:/
秃头王路飞 秃头王路飞
3年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序(基础库2.272)2.tdesignminiprogram(最低基础库版本^2.6.5)近期在写微信原生小程序,有一个需求就是去修改一个第三方的库的样式,在写的
放学路上 放学路上
3年前
微信小程序事件传参与vue传参的不同
1、vue点击事件传参(day)的写法:2、微信小程序写法(1)事件传参(2)获取参数dayprocess(e)console.log(e.currentTarget.dataset.day)3、总结:微信小程序不支持事件传参,可以通过把参数绑定在元素上,通过currentTarget.dataset获取参数。
梦
5年前
微信小程序modal
首先创建一个组件component,组件命名可以为modalmodal.wxml的内容为<viewclass'modalmask'wx:if'{{show}}'bindtap'clickMask'<viewclass'modalcontent'<scrollviewscrollyclass'mainc
Easter79 Easter79
4年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
4年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
Stella981 Stella981
4年前
HotApp小程序统计云后台 免费的Https云后台服务器
小程序学习有些地方需要后台,比如需要存储数据到服务器,比如微信登录。hotapp有免费的小程序云后台包含基本的新增,查询,修改,删除操作,方便于学习,而且不需要微信appid也可使用。小程序微信手机调试appid,简单解决办法:http://www.wxappunion.com/forum.
Wesley13 Wesley13
4年前
2020.8.07 微信小程序(组件封装)
今天说一下微信小程序组件的封装…为什么要封装组件?写组件的目的就是为了复用,它的好处太多了a.写更少的代码。b.减少开发时间。c.代码的bug更少。d.占用的字节更少。…组件复用使我们的代码组织变得非常灵活。那么组件到底怎么封装,其实就和vue组件封装的思
Wesley13 Wesley13
4年前
5个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你,可以关注和了解一下哦!WeUIWXSSWeUIWXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。