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

微信小程序之某个节点距离顶部和底部的距离 createSelectorQuery的更多相关文章
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- 微信小程序 实现点击返回顶部
效果: wxml: <!-- 点击回顶部 --> <image src='/images/top.jpg' class='goTop' hidden='{{showTop}}' bi ...
- 微信小程序监听view到顶部的高度
view style='width:100%;height:80rpx;' id='navigation'></view> wx.createSelectorQuery().sele ...
- 【重点突破】—— UniApp 微信小程序开发官网学习One
一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- WordPress版微信小程序2.1.5版发布
WordPress版微信小程序功能已经基本完善,利用这套程序,搭配WordPress提供的rest api,WordPress网站的站长可以快速搭建属于自己的网站微信小程序 . WordPress版微 ...
- 微信小程序从零开始开发步骤(一)搭建开发环境
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...
- 微信小程序-页面下拉
微信小程序当滑动到最顶部和最底部时,继续下拉,会将整个页面拉下去或者拉上去,本来以为是客户端自有的特性,就没去管他,直到我的禅道出现了这个记录... 其实这个问题是可以解决的,只需要在你不想出现在此情 ...
- 微信小程序切换标签改变样式
微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class=" ...
随机推荐
- Koa、koa-router、koa-jwt 鉴权详解:分模块鉴权实践总结
首先看koa-router koa-router use 熟悉Koa的同学都知道use是用来注册中间件的方法,相比较Koa中的全局中间件,koa-router的中间件则是路由级别的. koa-rout ...
- JS 判断域名并跳转到指定页面
判断访问指定域名,进行页面跳转 <!DOCTYPE html> <html> <head> <title>正在玩命加载中--</title> ...
- PPT 毕业答辩:学术风格的PPT
PPT 毕业答辩:学术风格的PPT 合适字体 便于阅读, 封面.标题 楷体.华康俪金黑.粗宋体.思源宋体.中山行书 正文 宋体.仿宋.微软雅黑.思源黑体 主题色 学术红.严谨紫.科学蓝 跟着LOGO ...
- CentOS 7 qemu 创建虚拟机简单流程
查看是否支持虚拟化 egrep -o '(vmx|svm)' /proc/cpuinfo 如果有显示则支持虚拟化,没有显示则不支持 安装qemu 和virt 系列软件包 yum install q ...
- 备忘 springboot 整合ehcache,注入CacheManager时提示 required a bean of type 'org.springframework.cache.CacheManager' that could not be found
问题因人而异,此处仅做备忘 整合过程: 1.添加maven依赖 <dependency> <groupId>net.sf.ehcache</groupId> < ...
- 数字U家,即刻出发!2022联合利华黑客马拉松启动!
2022联合利华黑客马拉松火热报名倒计时! 欢迎各领域的个人及组织团队参与 人工智能.数据挖掘.市场规模预测.原材料与包装风险控制.AR/VR.低碳.消费者偏好研究等超多创新赛题,任选其一. 作为快消 ...
- 2013年 第四届蓝桥杯C/C++ B组(省赛)
第一题:高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生 ...
- 版本升级 | v1.0.13发布,传下去:更好用了
新发行版来啦~ 本次更新主要聚焦兼容性的提升及结果报告格式的增加,另外对部分解析逻辑及使用体验进行了优化.在这里特别鸣谢大佬@Hugo-X在社区仓库提交的PR~ 后续,OpenSCA项目组会继续致力于 ...
- hdu 5234
题意:求在不超过k的情况下,最多可以得到多少价值. 三维dp,结合01背包,第三维就是用来保存在不同的背包容量下能得到的最大价值,也就是第三维有很多状态. #include<iostream&g ...
- python global函数的使用
1.在全局变量与局部变量均存在时自定义的函数优先使用局部变量,自定义函数并不能改变全局变量的值. 查看运行结果: 2.在没有局部变量时,使用全局变量,且函数内部不能改变全局变量的值 查看运行结果: ...