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

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

<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;
})
}

微信小程序之某个节点距离顶部和底部的距离 createSelectorQuery的更多相关文章

  1. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  2. 微信小程序中两种回到顶部按钮的效果实现

    一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...

  3. 微信小程序 实现点击返回顶部

    效果: wxml: <!-- 点击回顶部 --> <image src='/images/top.jpg' class='goTop' hidden='{{showTop}}' bi ...

  4. 微信小程序监听view到顶部的高度

    view style='width:100%;height:80rpx;' id='navigation'></view> wx.createSelectorQuery().sele ...

  5. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

  6. 微信小程序之换肤的功能

    pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...

  7. WordPress版微信小程序2.1.5版发布

    WordPress版微信小程序功能已经基本完善,利用这套程序,搭配WordPress提供的rest api,WordPress网站的站长可以快速搭建属于自己的网站微信小程序 . WordPress版微 ...

  8. 微信小程序从零开始开发步骤(一)搭建开发环境

    从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...

  9. 微信小程序-页面下拉

    微信小程序当滑动到最顶部和最底部时,继续下拉,会将整个页面拉下去或者拉上去,本来以为是客户端自有的特性,就没去管他,直到我的禅道出现了这个记录... 其实这个问题是可以解决的,只需要在你不想出现在此情 ...

  10. 微信小程序切换标签改变样式

    微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...

随机推荐

  1. 10倍!BoostKit鲲鹏全局缓存3大创新技术助力Ceph性能提升

    摘要:本文从四个方面阐述了BoostKit鲲鹏全局缓存技术,该技术针对Ceph开源存储方案存在的痛点,采用三大创新技术,有效的提高了Ceph的性能,最高可以将Ceph性能提升10倍. 本文分享自华为云 ...

  2. APP违法使用个人信息?不用怕,华为云VSS为你保驾护航

    摘要:华为云VSS漏洞扫描服务移动应用安全检测,为华为云客户提供移动应用的合规检测能力,遵循工信部164号文要求,针对安卓(apk)和鸿蒙(hap)应用进行安全和隐私合规问题检测. 本文分享自华为云社 ...

  3. 【Vue】阶段练习

    目录 需求 参考汽车之家 首页 登录功能 展示所有汽车页面 项目 登录页面 跨域请求 一 同源策略 二 CORS(跨域资源共享)简介 三 CORS基本流程 四 CORS两种请求详解 五 Django项 ...

  4. LT01 创建转储单

    一.LT01创建转储单 采购订单--MIGO收货--虚拟仓位--LT01上架--实体仓位--LT01下架--虚拟仓位--MIGO发料--生产订单 二.参考代码 "-------------- ...

  5. AcWing 第 1 场周赛补题记录(A~C)

    比赛链接:Here AcWing 3577. 选择数字 排序,然后选取两个数组的最大值 void solve() { int n; cin >> n; vector<int>a ...

  6. vivo悟空活动中台 - 微组件多端探索

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/oGX4XSm8F4fa1ocLdpyqlA作者:悟空中台研发团队 [悟空活动中台]系列往期精 ...

  7. 上海丨阿里云 Serverless 技术实战营邀你来玩!

    活动简介 本次沙龙深度探讨 "Serverless 在中国企业的落地和开发者实操" 主题,我们特别邀请了来自阿里云 一线技术专家,分享当前 Serverless 趋势和落地实践过程 ...

  8. d3过滤

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. json 解析:marshal 和 unmarshal

    Go 使用 encoding/json 包的 marshal 和 unmarshal 实现 json 数据的编解码.分别记录如下: 1. marshal 定义结构体: type OCP struct ...

  10. Could not get a resource from the pool 异常定位和解决

    最近在服务中经常看到以下错误,进行下定位和问题解决分析: 2023-12-08 00:10:58.248 WARN [terra-sr-server,a9006fd27ccb81d0,a9006fd2 ...