微信小程序之某个节点距离顶部和底部的距离 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=" ...
随机推荐
- PPT 年终总结PPT 应该怎么样改
- Java 网络编程 —— 基于 UDP 的数据报和套接字
UDP 简介 UDP(User Datagram Protocol,用户数据报协议)是传输层的另一种协议,比 TCP 具有更快的传输速度,但是不可靠.UDP 发送的数据单元被称为 UDP 数据报,当网 ...
- vue mutations与actions的区别
关于 mutations与actions的区别,网上有很多文章,大多是照着vue.js的教程再来一波!!因为最近接手vue项目,自己之前vue的知识点掌握也不深,就此机会把这个知识点再深挖一下. 使用 ...
- Problem B - Card Constructions (构造)
题意: 你可以用图示的方法建造金字塔,但是每一次都要建最大的金字塔,问最后能建几个金字塔. 思路: 我们可以发现对于每一个金字塔都是两边增加了两天边,然后中间行数− 1 -1−1个三角形,所以就可以求 ...
- Codeforces Round #529 (Div. 3) 练习赛
Examples input 6 baabbb output bab input 10 ooopppssss output oops 思路: 模拟等差数列即可 #include<bits/std ...
- 华东交通大学2019年ACM 双基 程序设计竞赛 个人题解(A - K)
目前先放几道题面,等晚上做完实验补 Update:A ~ D,更新剩余的题面(题面复制会有链接水印,懒得一一去除.直接截图) A.签到 真·签到题 输出祝贺祖国成立70周年!即可 B.欧涛的烦恼 思路 ...
- AtCoder ABC 181 个人题解(本场GJ x 3)
补题链接:Here A - Heavy Rotation 对 \(N\) 进行奇偶判断,奇数穿 Black .偶数穿 White B - Trapezoid Sum 前 \(n\) 项和公式:\(S_ ...
- Redis 缓存性能实践及总结
一.前言 在互联网应用中,缓存成为高并发架构的关键组件.这篇博客主要介绍缓存使用的典型场景.实操案例分析.Redis使用规范及常规 Redis 监控. 二.常见缓存对比 常见的缓存方案,有本地缓存,包 ...
- 四、swift大对象--静态态大对象
系列导航 一.swift对象存储环境搭建 二.swift添加存储策略 三.swift大对象--动态大对象 四.swift大对象--静态态大对象 五.java操作swift对象存储(官网样例) 六.ja ...
- Visual Studio Code如何校验yaml格式文件
1.yaml格式校验快捷键:Shift+Alt+F默认没有安装,这时候点击安装: 2.选择YAML Language Support by Red Hat 3.安装完成后,自动开启校验,当格式错误 ...