微信小程序之某个节点距离顶部和底部的距离 createSelectorQuery

简介: 微信小程序之某个节点距离顶部和底部的距离 createSelectorQuery

这个方法可以用来在上滑滚动的时候,让某一个区域置顶,


在下滑的时候,又变为原来的位置哈!


<huadong :class="{'hident':isFixed}"  id="box"></huadong>


onLoad() {
  const query = wx.createSelectorQuery();
  query.select('#box').boundingClientRect();
  query.exec((res) => {
  console.log(res); //这个节点距离顶部的距离   和距离底部的距离
  this.menutop = res[0].top;
})
}


1425695-20200301225651115-2100784857.png

相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
1月前
|
编解码 小程序 前端开发
微信小程序自定义顶部导航栏并适配不同机型
自定义导航栏是小程序中不可或缺的一个组件,它能够为用户提供清晰的页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航栏时,需要考虑不同机型的适配问题,确保导航栏在不同设备上都能正常显示和使用。同时,还需要注意导航栏的设计风格与页面整体风格的一致性,以及导航项的布局和交互方式等细节问题。
298 4
微信小程序自定义顶部导航栏并适配不同机型
|
7月前
|
小程序 JavaScript
微信小程序自定义底部tabBar按钮
微信小程序自定义底部tabBar按钮
123 0
|
1月前
|
小程序 Windows
【微信小程序】全局配置和windows节点常用配置
【微信小程序】全局配置和windows节点常用配置
36 1
|
1月前
|
小程序 API
微信小程序返回到顶部功能实现
微信小程序返回到顶部功能实现
|
6月前
|
小程序 前端开发 JavaScript
微信小程序(十五)小程序回到顶部
<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />
39 0
|
7月前
|
小程序 前端开发 JavaScript
微信小程序底部按钮tabbar组件封装
微信小程序底部按钮tabbar组件封装
67 0
|
9月前
|
小程序
微信小程序 - 添加以及配置底部TabBar
微信小程序 - 添加以及配置底部TabBar
93 0
微信小程序 - 添加以及配置底部TabBar
|
12月前
|
小程序 安全 前端开发
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
637 0
|
12月前
|
小程序 算法 Java
微信小程序制作顶部导航栏
微信小程序制作顶部导航栏
124 0