微信小程序之某个节点距离顶部和底部的距离 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

相关文章
|
编解码 小程序 前端开发
微信小程序自定义顶部导航栏并适配不同机型
自定义导航栏是小程序中不可或缺的一个组件,它能够为用户提供清晰的页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航栏时,需要考虑不同机型的适配问题,确保导航栏在不同设备上都能正常显示和使用。同时,还需要注意导航栏的设计风格与页面整体风格的一致性,以及导航项的布局和交互方式等细节问题。
988 4
微信小程序自定义顶部导航栏并适配不同机型
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
小程序 JavaScript
微信小程序自定义底部tabBar按钮
微信小程序自定义底部tabBar按钮
359 0
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
490 0
|
小程序
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
【微信小程序-原生开发】实用教程18 - 九宫格、底部悬停按钮、页内悬浮按钮、拨打电话、一键复制
310 0
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
486 0
|
小程序 Windows
【微信小程序】全局配置和windows节点常用配置
【微信小程序】全局配置和windows节点常用配置
285 1
|
小程序
微信小程序 - 添加以及配置底部TabBar
微信小程序 - 添加以及配置底部TabBar
307 0
微信小程序 - 添加以及配置底部TabBar
|
小程序 API
微信小程序返回到顶部功能实现
微信小程序返回到顶部功能实现
|
小程序 前端开发 JavaScript
微信小程序(十五)小程序回到顶部
<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />
172 0

热门文章

最新文章

下一篇
开通oss服务