首页 > 移动平台 > 详细

uniapp获取组件距离顶部距离,还有遇到的一些坑

时间:2021-07-18 23:20:30      阅读:27      评论:0      收藏:0      [点我收藏+]
uni  
  .createSelectorQuery()  
  .in(this)  
  .select(".container .cat-box")  
  .boundingClientRect((data) => {  
    this.pageScroll = data.top;  
  })  
  .exec();  

data回调参数包括了组件的一些信息,包括距离头部的距离

 

使用这个方法获取距离时 有两个条件:
1、在onReady或者mounted中使用;
2、保证前面的图片高度设置好了,因为uni-image有个默认高度为 height: 240px ,容易造成偏差;

3、正常情况下this指的应该是该方法mounted或onReady所在的vue元素,然而在wx小程序中,输出的this并未指向这个vue元素,即el为none,那么问题来了,this.pageScroll = data.top; 将无法获取想要的信息,解决方法:

const that = this
uni  
  .createSelectorQuery()  
  .in(this)  
  .select(".container .cat-box")  
  .boundingClientRect((data) => {  
    that.pageScroll = data.top;  
  })  
  .exec();  

 

uniapp获取组件距离顶部距离,还有遇到的一些坑

原文:https://www.cnblogs.com/xijiang/p/15027704.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!